Laravel Livewire Event Listeners not firing

Question

I am currently using an event emitter to render some Javascript to show a Stripe credit card input. The desired outcome is to show a modal and then render the credit card input using a Javascript event listener.

I have a button like so to show a Jetstream modal:

<x-jet-secondary-button type="button" wire:click="showCreateModal">Show</x-jet-secondary-button>

Within the Livewire component this is method:

public function showCreateModal()
{
    $this->emit('loadCard');

    $this->showCreate = true;
}

And then this is the Javascript event listener:

<script type="text/javascript">
    var STRIPE = Stripe('{{ config("cashier.key") }}');
    var elements = STRIPE.elements();

    Livewire.on('loadCard', function () {
        setTimeout(function() {
            var card = elements.create('card');
            card.mount('#card-element');
        }, 500)
    });
</script>

I have tried 3 or 4 different versions and so far no luck. Any help/feedback would be appreciated.

Answer 1

Found the issue. I was loading Vue into the page on top of the @livewireScripts blade directive. By removing Vue, resolved the issue.