从数据库中删除后，Vue.js $remove 不删除元素

我正在使用Laravel并try 学习Vue.js.我有一个正常工作的删除请求，正在从数据库中删除该对象.问题是，成功删除后，它不会从DOM中删除.我正在使用$remove方法并将其传递给完整对象，因此我知道我遗漏了一些东西.

作为旁注，我有一个main.js作为入口点，一个PersonTable.vue作为组件.PersonTable.vue保存该模板的模板和脚本.

以下是我对拉威尔的看法:

<div id="app">
    <person-table list="{{ $persons }}">

    </person-table>
</div>

这是我的"个性".vue:

<template id="persons-template">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Persons List</h1>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Email</td>
                        <td>Gender</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="person in list">
                        <td>{{person.first_name }}</td>
                        <td>{{person.last_name }}</td>
                        <td>{{person.email }}</td>
                        <td>{{person.gender }}</td>
                        <td><span @click="deletePerson(person)">X</span>
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>

<script>
export default {

    template: '#persons-template',

    props: ['list'],

    methods: {
        deletePerson: function(person) {
            this.$http.delete('/person/' + person.id).then(
                function(response) {
                    this.persons.$remove(person);
                }
            );
        }

    },

    created: function() {
        this.persons = JSON.parse(this.list);
    }

};
</script>

我的main.js个切入点:

var Vue = require('vue');

Vue.use(require('vue-resource'));

var Token = document.querySelector('meta[name="_token"]').getAttribute('content');

Vue.http.headers.common['X-CSRF-TOKEN'] = Token;

import PersonTable from './components/PersonTable.vue';

new Vue({


    el: '#app',

    components: { PersonTable },

})