title: Vue.js $remove not removing element after deleted from database
body: <p>I am using Laravel and trying to learn Vue.js. I have a delete request that is working properly and deleting the object from the database. The problem is that it is not being removed from the DOM after the successful deletion. I am using the <code>$remove</code> method and passing it the full object, so I know I'm missing something.</p>
  
  <p>As a side note, I have a <code>main.js</code> as an entry point with a <code>PersonTable.vue</code> as a component. The <code>PersonTable.vue</code> holds the template and script for that template.</p>
  
  <p>Here is my Laravel view:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;person-table list="{{ $persons }}"&gt;
  
      &lt;/person-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my `PersonTable.vue:</p>
  
  <pre><code>&lt;template id="persons-template"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;h1&gt;Persons List&lt;/h1&gt;
                  &lt;table class="table table-hover table-striped"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;td&gt;First Name&lt;/td&gt;
                          &lt;td&gt;Last Name&lt;/td&gt;
                          &lt;td&gt;Email&lt;/td&gt;
                          &lt;td&gt;Gender&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;tr v-for="person in list"&gt;
                          &lt;td&gt;{{person.first_name }}&lt;/td&gt;
                          &lt;td&gt;{{person.last_name }}&lt;/td&gt;
                          &lt;td&gt;{{person.email }}&lt;/td&gt;
                          &lt;td&gt;{{person.gender }}&lt;/td&gt;
                          &lt;td&gt;&lt;span @click="deletePerson(person)"&gt;X&lt;/span&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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);
      }
  
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And my <code>main.js</code> entry point:</p>
  
  <pre><code>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 },
  
  })
  </code></pre>