title: Removing a row from a table with VueJS
body: <p>In Vue how do you remove a row from a table when the item is deleted?</p>
  
  <p>Below is how I am rendering the table</p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr v-for="item in items"&gt;
      &lt;td v-text="item.name"&gt;&lt;/td&gt;
      &lt;td v-text="item.phone_number"&gt;&lt;/td&gt;
      &lt;td v-text="item.email"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button @click="fireDelete(item.id)"&gt;Delete&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Below is an excerpt from my Vue component.</p>
  
  <pre><code>data() {
        return {
          items: []
        }
      },
  
  methods: {
      fireDelete(id) {
          axios.delete('/item/'+id).then();
      }
  },
  mounted() {
        axios.get('/item').then(response =&gt; this.items = response.data);
      }
  </code></pre>
  
  <p>The axios.get work and so does the axios.delete, but the fronend doesn't react so the item is only removed from the table after a page refresh. How do I get it to remove the relevant <code>&lt;tr&gt;</code>?</p>