Vue.js Uncaught TypeError: this.list.$remove is not a function
<p>I keep getting the same error that this.list.$remove is not a function.  I believe it has something to do with the html markup but not sure.  Can anyone point me in the right direction?  I have been struggling for the last 2 days.</p>

<pre><code> Vue.component('cart-co', {

  template: '#cart-template',

  data: function() {
    return {
      list: []
    }
  },

  ready: function() {
    $.getJSON('cart/content', function(data) {
      this.list = data;
    }.bind(this));
  },

  methods: {
    removeItem: function(item) {
      console.log(item);
      this.list.$remove(item);
    }
  }
});


new Vue({
  el: 'body',
});
</code></pre>

<p>Here is my cart section:</p>

<pre><code>&lt;cart-co&gt;&lt;/cart-co&gt;

&lt;template id="cart-template"&gt;
  &lt;div class="cart-content-wrapper"&gt;
    &lt;div class="cart-content" &gt;
      &lt;ul v-if="list" class="scroller" style="height: 250px;"&gt;

        &lt;li v-for="item in list"&gt;
          &lt;a href="item.html"&gt;&lt;img src="assets/temp/cart-img.jpg" alt="" width="37" height="34"&gt;&lt;/a&gt;
          &lt;span class="cart-content-count"&gt;@{{ item.quantity }}&lt;/span&gt;
          &lt;strong&gt;&lt;a href="item.html"&gt;@{{ item.name }}&lt;/a&gt;&lt;/strong&gt;
          &lt;em&gt;@{{ item.price | currency }}&lt;/em&gt;
          &lt;a href="#" class="del-goods" v-on:click="removeItem(item)"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;

      &lt;/ul&gt;
      &lt;ul v-else class="scroller" style="height: 250px;"&gt;
        &lt;li&gt;Shopping cart is empty&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="text-right"&gt;
        &lt;a href="{{ route('cart.show-cart') }}" class="btn btn-default"&gt;View Cart&lt;/a&gt;
        &lt;a href="checkout.html" class="btn btn-primary"&gt;Checkout&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>