title: Computed property is not being updated
body: <p>I have a data property, which is an empty array:</p>
  
  <pre><code>data: () =&gt; ({
      total: [],
  });
  </code></pre>
  
  <p>A method called <code>getAmount()</code>:</p>
  
  <pre><code>getAmount(item){ // gets individual amount and pushes it to the total array
      var amount = 0;
      // Skipping the amount calculation to keep the 
      // question as small as possible
      amount = item.price + 10;
      this.total[this.total.length] = amount;
      return amount;
  }
  </code></pre>
  
  <p>And a computed property called <code>getTotal()</code>:</p>
  
  <pre><code>getTotal(){
      if(this.total.length &gt; 0){
        return this.total.reduce((x,y) =&gt; x+y);
      } else {
        return 0;
      }
    },
  </code></pre>
  
  <p>In the template I am accessing the getAmount() method and getTotal computed property like this:</p>
  
  <pre><code>&lt;v-data-table
    :headers="headers"
    :items="orderShares"
    hide-actions
    class="elevation-1"
  &gt;
    &lt;template slot="items" slot-scope="props"&gt;
      &lt;td class="text-xs-left"&gt;{{ props.item.order.order_code }}&lt;/td&gt;
      &lt;td class="text-xs-left"&gt;{{ getAmount(props.item) }}&lt;/td&gt;
    &lt;/template&gt;
  &lt;/v-data-table&gt;
  
  &lt;p&gt; Total Amount: {{ getTotal }} &lt;/p&gt;
  </code></pre>
  
  <p>The total amount always remains <code>0</code>. But what I was expecting is that it should update as many times as the <code>getAmount()</code> method is called. Because <code>getAmount()</code> triggers a change in the <code>total</code> prop, theoretically, computed property <code>getTotal</code> should also be updated since it depends on <code>total</code>. But that's not what's happening here. How can I fix this?</p>