Updating a view from database

Hi im trying to learn vue and going through the Video tutorials and whilst doing so trying to build a test app using stripe. What im trying to do is to purchase credits using stripe and then it updates the value of the amount of credits once it has updated.

As it stands at the moment im passing through the {{userCredits}} from the blade view but would ideally like to get it from vue itself.

Vue Component:

<template>
    
    <form action="/member/billing/purchase-credits" method="POST">
    <p class="content">
        You currently have: <strong><span class="has-text-danger">{{ userCredits }}</span></strong> credits <br>
    </p>
        <input type="hidden" v-model="stripeToken" name="stripeToken">
        <input type="hidden" v-model="stripeEmail" name="stripeEmail">
        <div class="column is-half">
        <div class="field has-addons">
                <div class="control is-expanded">
                    <div class="select is-fullwidth">
                        <select name="credit" v-model="credit">
                            <option v-for="credit in credits" :value="credit.id">
                                {{ credit.title }} &mdash; £{{ credit.cost / 100}} 
                            </option>
                        </select>
                    </div>
                </div>
            <div class="control">
                <button class="button is-danger" type="submit" v-on:click.once="disable" v-bind:class="{ 'is-loading': isActive }" @click.prevent="buy">Purchase</button>
            </div>
        </div>
        </div>

    </form>
</template>

<script>
    import Notification from 'vue-bulma-notification'
    const NotificationComponent = Vue.extend(Notification)

    const openNotification = (propsData = {
        title: '',
        message: '',
        type: '',
        direction: '',
        duration: 4500,
        container: '.notifications'
    }) => {
        return new NotificationComponent({
            el: document.createElement('div'),
            propsData
        })
    }

    export default {
        components: {
            Notification
        },

        props: ['credits'],

        data() {
            return {
                stripeEmail: '',
                stripeToken: '',
                credit: 1,
                status: false,
                statusOk: false,
                isActive: false,
                userCredits: Jacabra.userCredits,
            }
        },

        created(){
            this.stripe = StripeCheckout.configure({
                
                key: Jacabra.stripeKey ,
                locale: "auto",
                email: Jacabra.userEmail,       
                token: (token) => { 
                    
                    this.stripeToken = token.id;
                    this.stripeEmail = token.email;
                    
                    axios.post('/member/billing/purchase-credits', this.$data)
                        
                        .then(
                            response => openNotification({
                                message: 'Congratulations. Your purchase has been succesful. Please refresh the page to see any changes',
                                type: 'success',
                                duration: 7000
                            }))
                            .then(response => this.isActive = false)

                        .catch(
                            error => openNotification({
                                message: error.response.data.status,
                                type: 'danger',
                                duration: 7000
                            })
                            .then(response => this.isActive = false)
                        );
                    },  
                });
        },

        methods: {

            buy(){
                let credit = this.findCreditById(this.credit);

                this.stripe.open({
                    name: credit.title,
                    description: "Purchase Jacabra Credits.",
                    zipCode: false,
                    currency: 'gbp',
                    amount: credit.cost
                });
            },

            getMyCredits(){
                let userId = Jacabra.userId;

                axios.get('api/v1/get-credits', this.userId)
                .then(response => {
                    this.myCredits = response.data // changed from $this.options = response.data.items
                });
            },

            disable (event) {   
                this.isActive = true
            },

            findCreditById(id){
                return this.credits.find(credit => credit.id == id);
            },

        }

    }
</script>

Any help or info would be grateful...