Stripe not being called

I am trying to use Vue.js for my front end to call Stripe and create a token which then is sent to my backend. I have tested everything using plain HTML/JS and it all works fine, my issue comes in trying to use Vue.js I think my issue might be in how I am binding the stripe public key. Below is my code, and I have zero output to speak of, I get just redriected to the same page but wth ? at the end of the URL. Nothing else, console shows nothing and no error message or anything send to my back end.

template code

There is more but not related

<div class="col-md-8">
    <card class='stripe-card col-md-8'
        :class='{ complete }'
        :stripe='stripeKey'
        :options='stripeOptions'
        @change='complete = $event.complete'
    />
    <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Submit Payment Details</button>
   <br>
</div>

script section with relavent added

import { Card, createToken } from 'vue-stripe-elements-plus'
import axios from 'axios';

export default {
    components: { Card },
    data() {
        return {
            errorMessage: null,
            successMessage: null,
            complete: false,
            stripeKey: process.env.VUE_APP_STRIPE_PUB_KEY,
            stripeOptions: {
                // see https://stripe.com/docs/stripe.js#element-options for details
                hidePostalCode: true
            },
            current: {
                stripe: {
                    plan: null,
                    last4: null
                }
            },
        }
    },
    methods: {
        pay () {
            createToken().then(result =>  {
                axios.post('/billing/updateCard', {
                token: result.token,
                })
                .then(res => {
                if(res.data.success == true) {
                    this.successMessage = res.data.message
                    console.log(res.data.message)
                }
                if(res.data.success == false) {
                    this.errorMessage = res.data.message // Display error message from server if an error exists
                }
                })
                .catch((err) => {
                if(err) console.log(err)
                if(err) this.$router.push('/company/settings?success=false')
                })
            }); 
        }
    }
}
</script>

I have checked that the API key is actually in the data value by doing <p>{{ stripeKey }}</p> and seeing the value show up. So yes the key is there and the key is valid (tested copy/paste into my HTML/JS test)