Laravel Cashier/Stripe Elements - integration error

Would appreciate some help.

I'm using Laravel Cashier for the first time and I'm continually encountering an error implementing the Stripe.js library.

Whenever I request the view in the browser I receive the following console error in dev tools:

"Uncaught IntegrationError: card Element didn't mount normally".

This is the view (a near duplicate of what's found in the Laravel Cashier documentation):

@extends('layout')
@section('content')
    <form id="payment-form">
        <input id="card-holder-name" type="text">

        <!-- Stripe Elements Placeholder -->
        <div id="card-element"></div>

        <button id="card-button" data-secret="{{ $intent->client_secret }}">
            Update Payment
        </button>
    </form>

    @push('scripts')
        <script src="https://js.stripe.com/v3/"></script>

        <script>
            const stripe = Stripe('{{ env('STRIPE_KEY') }}');

            const elements = stripe.elements();
            const cardElement = elements.create('card');

            cardElement.mount('#card-element');

            const cardHolderName = document.getElementById('card-holder-name');
            const cardButton = document.getElementById('card-button');
            const clientSecret = cardButton.dataset.secret;

            cardButton.addEventListener('click', async (e) => {
                const { setupIntent, error } = await stripe.confirmCardSetup(
                    clientSecret, {
                        payment_method: {
                            card: cardElement,
                            billing_details: { name: cardHolderName.value }
                        }
                    }
                );

                if (error) {
                    // Display "error.message" to the user...
                } else {
                    // The card has been verified successfully...
                }
            });
        </script>
    @endpush
@endsection

I'm wondering if it's a conflict with Vue?