app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

import router from './router/router';
import store from './store/store';
import Cookies from 'js-cookie';

const app = new Vue({

    store,

    computed: {
        app_ready: () => store.state.app_ready,
    },

    router,

    components: {
        loader: require('./components/partials/Loader.vue'),
        navigation: require('./components/partials/Navigation.vue'),
    },

    created() {
        const api_token = Cookies.get('api_token');
        if (api_token) {
            this.$store.commit('setApiToken', api_token);
        }

        Vue.http.interceptors.push((request, next) => {
            request.headers['Authorization'] = `Bearer ${store.state.api_token}`;

            next();
        });
    },

}).$mount('#app');

Tickets.vue

<template>
    <div class="Tickets">
        <div class="row">

            <div class="col-xl-35 col-lg-40">
                <div class="card card">
                    <div class="card-header">
                        Tickets
                    </div>
                    <div class="list-group list-group-flush">
                        <div class="list-group-item">
                            <strong class="mr-1" v-text="event.total_tickets - event.remaining_tickets"></strong> sold
                        </div>
                        <div class="list-group-item">
                            <strong class="mr-1" v-text="event.remaining_tickets"></strong> remaining
                        </div>
                        <div class="list-group-item">
                            <strong class="mr-1" v-text="event.total_tickets"></strong> total
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-85 col-lg-80">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-plus"></i> Add tickets
                    </div>
                    <form class="card-block" @submit.prevent="submit">
                        <div class="form-group row">
                            <label class="col-sm-20 col-form-label">Amount</label>
                            <div class="col-sm-100">
                                <input type="number" class="form-control" v-model="new_ticket.amount" min="1" />
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-100 offset-sm-20">
                                <button class="btn btn-success">
                                    <i class="fa fa-plus"></i>
                                    Add
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import toastr from 'toastr';

    export default {

        name: 'Tickets',

        props: ['event'],

        data: () => ({
            custom_type: '',
            new_ticket: {
                amount: 1,
            },
        }),

        methods: {

            submit() {
                this.$http.post(`${Barcode.API_URL}/event/${this.event.id}/ticket`, this.new_ticket)
                    .then(() => {
                        this.event.fresh();
                        toastr.success('Tickets added');
                    });
            },

        },

    }
</script>