Uncaught TypeError: Cannot read property 'closed' of undefined

I am following the stripe series and when i got to the video that integrates vue i got this error

Uncaught TypeError: Cannot read property 'closed' of undefined at IframeView.closed (checkout.js:3) at Object.closed (checkout.js:3) at RPC.processMessage (checkout.js:2) at RPC.processMessage (checkout.js:2) at RPC.message (checkout.js:2) at checkout.js:2

I don't really know much about vue so if anyone could help that would be great!

here is my component

<template>
    <form action="/purchases" method="POST">

        <input type="hidden" name="stripeToken" v-model="stripeToken">
        <input type="hidden" name="stripeEmail" v-model="stripeEmail">

        <button type="submit" @click.prevent="buy">Buy my book</button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                stripeEmail: '',
                stripeToken: ''
            };
        },
        created() {
            this.stripe = StripeCheckout.configure({
                key: "{{ config('services.stripe.key') }}",
                image: "https://stripe.com/img/documentation/checkout/marketplace.png",
                locale: "auto",
                token: (token) => {
                    this.stripeToken = token.id;
                    this.stripeEmail = token.email;

                    axios.post('/purchases', this.$data)
                        .then(response => alert('Complete! Thanks for the payment!'))
                }
            });
        },

        methods: {
            buy() {
                this.stripe.open({
                    name: 'My book',
                    description: 'Some details about the book.',
                    zipCode: true,
                    amount: 2500
                });
            }
        }
    }
</script>