Unable to get Stripe elements to work with Vue.js - node.js

Question

I am trying to get it so that a Vue component (currently have as just a route/view), will be able to display a styled version of Stripe Elements form for entering credit cards.
One other issue I am having is that I don't want to have the stripe js file loaded with every page like it does when in index.html. I am instead looking for it to just load on a single component/view.
My end idea is that I will have a button that when clicked will display a bootstrap modal and will show the Stripe Elements form which they then will enter their credit card info into which will, in turn, give me a token which I can then send to my backend along with an auth (JWT) header to do processing on my API.
So far I have tried mounting, creating, vue-strip-elements-plus examples and many more things.
I've included the entire Billing.vue file minus my stripe API key
I am not picky on how I do it whether it be with the way from the stripe docs or the package mentioned above.
<div class="container">
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button v-on:click="update">Submit Payment</button>
</form>
</div>
</template>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_<key>');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {
hidePostalCode: true,
style: style
})
export default {
name: 'Billing',
data() {
},
mounted() {
card.mount('#card-element');
},
update: function() {
stripe.createToken(card).then(function(result) {
// Access the token with result.token
console.log(result.token) // I'd then send the token using axios to my backend
});
}
}
</script>```
I am expecting the token to currently be console.log which I can check in my browser