title: Vue.js $set not updating the display
body: <p>i am having trouble using <a href="http://vuejs.org/" rel="nofollow">vuejs 1.0</a> $set(), i have made a <a href="https://jsfiddle.net/6zovax1v/" rel="nofollow"><strong>jsfiddle</strong></a>. the <code>addQty1</code> works and updates the display, when the <code>addQty2</code> only update data.</p>
  
  <p>Any idea why this is happening ?</p>
  
  <pre class="lang-js prettyprint-override"><code>var TicketLine = Vue.extend({
    template: '#ticketLineTemplate',
    props: ['index', 'lines'],
    data: function() {
      var line = this.lines[this.index];
      return {
        qty: line.qty,
        label: line.label
      };
    },
    methods: {
      addQty1: function() {
        var line = this.lines[this.index];
        line.qty++;
        this.lines.$set(this.index, $.extend({}, line));
      },
      addQty2: function() {
        var line = this.lines[this.index];
        line.qty++;
        this.lines.$set(this.index, line);
      }
    }
  });
  
  var lines = [{
    qty: 1,
    label: 'Pizza'
  }, {
    qty: 2,
    label: 'Café'
  }, {
    qty: 1,
    label: 'Soda'
  }];
  
  new Vue({
    el: "#app",
    data: {
      lines: lines
    },
    components: {
      'ticket-line': TicketLine
    }
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;div id="ticket"&gt;
      &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;th&gt;Qty&lt;/th&gt;
          &lt;th&gt;Label&lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;template v-for="line in lines"&gt;
            &lt;ticket-line :index="$index" :lines="lines"&gt;&lt;/ticket-line&gt;
          &lt;/template&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;script type="text/x-template" id="ticketLineTemplate"&gt;
      &lt;tr&gt;
        &lt;td&gt;{{ qty }}&lt;/td&gt;
        &lt;td&gt;{{ label }}&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" v-on:click="addQty1()"&gt;addQty1&lt;/button&gt;
          &lt;button type="button" v-on:click="addQty2()"&gt;addQty2&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>