How to make an AJAX delete request in a Vue JS component?

I have a Vue JS component that contains a modal asking users if they want to delete a particular record with 'Yes/No' options. I'd like an AJAX delete request to fire on click of the Yes button, and I am now trying to move the ajax code inside of my Vue component and use vue-resource.

Currently upon delete I am receiving the following error message in the chrome devtools console:

app.js:38907 DELETE http://127.0.0.1:8000/clients/2/delete 419 (unknown status)

127.0.0.1/:1 Uncaught (in promise) Response {url: "/clients/2/delete", ok: false, status: 419, statusText: "unknown status", headers: Headers, …}

I have tried the following code:

app.js

    Vue.component('client', require('./components/ClientComponent.vue').default);
    
    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */
    
    import VueResource from 'vue-resource';
    
    Vue.use(VueResource);
    
    const app = new Vue({
        el: '.table-container',
    });

ClientComponent.vue

    <template>
        <li :data-clientID="client.id"><a :href="this.homeRoute">{{ client.first_name + ' ' + client.last_name }}</a>
            <span class="delete_x" data-toggle="modal" v-bind:data-target="delete_modal" :data-model="client.id">x</span>

            <div class="modal fade" v-bind:id="delete_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">          
                            <h4 class="modal-title" id="myModalLabel">Are you sure you want to delete client {{ client.first_name + ' ' + client.last_name }}?</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-footer">
                            <button type="button" v-on:click="onDelete" :data-clientID="client.id" class="delete_button btn btn-default" data-dismiss="modal">Yes</button>
                            <button type="button" class="btn btn-primary">No</button>
                        </div>
                    </div>
                </div>
            </div>        
        </li>
    </template>
    
    <script>
        export default {
            name: 'client',
            props: {
                client: {
                    type: Object,
                    required: true
                },
                homeRoute: {
                    type: String,
                    required: true
                }                
            },
            methods: {
                onDelete: function (message) {
                    
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $('.alert-success').hide();
                    this.$http.delete("/clients/" + this.client.id + "/delete")
                    .then(function(response) {
                        client.remove();
                    });
                }
            },
            computed: {
                delete_modal() {
                    return '#delete_modal_' + this.client.id; 
                },
                delete_id(){
                    return 'delete_modal_' + this.client.id;
                }
            }
        }

        
    </script>

web.php

    Route::get('/clients/{client}/edit', ['as' => 'clients.edit', 'uses' => 'clientController@edit']);
    Route::put('/clients/{client}/update', ['as' => 'clients.update', 'uses' => 'clientController@update']);
    Route::delete('/clients/{client}/delete', ['as' => 'clients.delete', 'uses' => 'clientController@delete']);

Any andvice would be really helpful.

Thanks,

Rob