Unable to get Stripe elements to work with Vue.js

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