Удаление аксиом Laravel и Vuejs не дает ошибки, но не удаляет

Я создал веб-маршрут, который должен удалить контакт на основе определенного идентификатора, и он выглядит так:

Route::delete('/api/deleteContact/{id}', 'ContactController@destroy');

Затем внутри контроллера у меня есть следующее:

public function destroy($id)
{
    // delete a contact by id
    return response()->json(Contact::whereId($id), 200);
}

Внутри одного из моих файлов шаблона блейда я вызываю компонент Vue, который отображает список контактов:

<table class = "table">
    <thead>
        <tr>
            <th scope = "col">#</th>
            <th scope = "col">Name</th>
            <th scope = "col">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for = "contact in contacts">
            <td> {{ contact.id }} </td>
            <td> {{ contact.name }} </td>
            <td> {{ contact.phone }} </td>
            <td><button class = "btn btn-secondary">Edit</button></td>
            <td><button @click = "deleteContact(contact.id)" class = "btn btn-danger">Delete</button></td>
        </tr>
    </tbody>
</table>

Кнопка удаления вызывает метод deleteContact и получает соответствующий идентификатор контакта.

Метод выглядит следующим образом:

deleteContact(id){
    axios.delete('/api/deleteContact/' + id)
    .then(res => {
        for(var i = 0; i < this.contacts.length; i++) {
            if (this.contacts[i].id == id) {
                this.contacts.splice(i, 1);
            }
        }
    })
    .catch(err => console.info(err));
}

Когда я нажимаю удалить, происходит обещание (затем), однако после обновления страницы я заметил, что ничего не было удалено, и я не вижу ошибок в консоли.

Как я могу успешно удалить контакт на основе идентификатора, переданного в функцию deleteContact?