Need help with pushing javascript in Livewire blade template

I'm having trouble with a button used to delete records and should display a confirmation dialog prior to deleting the record. I've read through the docs several times over and it's not clicking in my head. I've also tried some of the examples but they don't appear to work in my case either. What has worked is adding the

protected $listeners = [ event ,  method ]  

in the component class however this totally circumvents displaying the confirmation dialog.

I would like to figure this out because after this, I need to integrate a javascript/jquery signature pad into my project.

Here's my button:

<button wire:click="$emit('triggerDelete',{{ $contract->id }})"  class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-4 rounded"  id="deleteContract">Delete</button>

Here is my in-line script:

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
    <script type="text/javascript">
        const Swal = require('sweetalert2')

        document.addEventListener('DOMContentLoaded', function (e) {
            @this.on('triggerDelete', contractId => {
                Swal.fire({
                    title: 'Are You Sure?',
                    text: 'Contract ' + contractId + '  will be deleted!',
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Delete!'
                }).then((result) => {
                    if (result.value) {
                        @this.call('delete',contractId)
                    } else {
                        console.log("Canceled");
                    }
                });
            });
        })
    </script>
@endpush