Issue with vue js and stripe with laravel

I am following along with a series on laracasts accepting card payments with stripe.

Here is my vuejs component

<template>
   <form action="/subscriptions" method="POST">
    <input type="hidden" name="stripeToken" v-model="stripeToken">
    <input type="hidden" name="stripeEmail" v-model="stripeEmail">

    <div class="form-group">
        <select name="plan" v-model="plan">
            <option v-for="plan in plans" :value="plan.id">
                 &mdash; $
            </option>
        </select>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary" @click.prevent="subscribe">Subscribe</button>
    </div>

    <p class="help is-danger" v-show="status" v-text="status"></p>
</form>
</template>

<script>
export default {
    props: ['plans'],
    data() {
        return {
            stripeEmail: '',
            stripeToken: '',
            plan: 1,
            status: false,
        };
    },
    created() {
        this.stripe = StripeCheckout.configure({
            key: Laravel.stripeKey,
                           image:"https://stripe.com/img/documentation/checkout/marketplace.png",
            locale: "auto",
            panelLabel: "Subscribe For",
            email: Laravel.user.email,
            token: (token) => {
            this.stripeToken = token.id;
        this.stripeEmail = token.email;
        axios.post('/subscriptions', this.$data)
            .then(
                response => alert('Complete! Thanks for your payment!'),
            response => this.status = response.body.status
    )
    }
    });
    },
    methods: {
        subscribe() {
            let plan = this.findPlanById(this.plan);
            this.stripe.open({
                name: plan.name,
                description: plan.name,
                zipCode: true,
                amount: plan.price,
            });
        },
        findPlanById(id) {
            return this.plans.find(plan => plan.id == id);
        }
    }
}
</script>

When I go to the page with the component on it and click the subscribe button it throws an error:

Cannot read property 'open' of undefined

And there is also a vue warn error :

[Vue warn]: Error in created hook: (found in at D:**********\resources\assets\js\components\frontend\JoinForm.vue)

via tom Bannister