title: v-data-table doesn't updates on a new data
body: <p>I have a object <code>portfoliosData</code> in a Vuex store. This object has a property <code>metrics</code></p>
  
  <pre><code>  state: {
      portfoliosData: {
        performance: [],
        metrics: []
      },
  </code></pre>
  
  <p>When performing an action I mutate the property in the store and want to show the updates in a table.</p>
  
  <pre><code> &lt;div id="amsample"&gt;
    &lt;div id="chartdiv"&gt;&lt;/div&gt;
     &lt;v-tabs-items  :touchless="true"&gt;
        &lt;v-tabs-content :key="0" id="tab-1"&gt;
          &lt;v-card flat&gt;
            &lt;v-card-text&gt;
              Return Performance
              &lt;v-data-table
                :headers="headers"
                :items="metrics"
                :custom-sort="sortPercentage"
                hide-actions
                class="elevation-1"
              &gt;
                &lt;template slot="items" scope="props"&gt;
                  &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
                  &lt;td class="text-xs-right"&gt;{{ props.item.acRet }}&lt;/td&gt;
                  &lt;td class="text-xs-right"&gt;{{ props.item.anRet }}&lt;/td&gt;
                  &lt;td class="text-xs-right"&gt;{{ props.item.anVol }}&lt;/td&gt;
                  &lt;td class="text-xs-right"&gt;{{ props.item.maxDd }}&lt;/td&gt;
                  &lt;td class="text-xs-right"&gt;{{ props.item.sRatio }}&lt;/td&gt;
                  &lt;td class="text-xs-right"&gt;{{ props.item.inRatio }}&lt;/td&gt;
                &lt;/template&gt;
              &lt;/v-data-table&gt;
            &lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-tabs-content&gt;
      &lt;/v-tabs-items&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>In the component table observes the metrics variable.</p>
  
  <pre><code>data() {
        return {
  
          headers: [
            {text: 'Measure', value: 'name', sortable: false},
            {text: 'Accumulative Return', value: 'acRet'},
            {text: 'Annual Return', value: 'anRet'},
            {text: 'Annual Volatility', value: 'anVol'},
            {text: 'Max Drawdown', value: 'maxDd'},
            {text: 'Sharpe Ratio', value: 'sRatio'},
            {text: 'Information Ratio', value: 'inRatio'},
          ],
          metrics: []
        }
      },
  </code></pre>
  
  <p>When I call an action in the component I get the updated <code>metrics</code> from the store</p>
  
  <pre><code>//Component
    calulateMetrics(event) {
      this.$store.dispatch('performeMetricsCalculation', {dataZoomStart:event.startDate, dataZoomEnd:event.endDate}).then(() =&gt; {
        this.metrics = this.$store.getters.getMetrics;
        console.log("Calculated metric", this.metrics)
      })
    },
  
  //actions
  performeMetricsCalculation({dispatch, commit, getters}, {dataZoomStart, dataZoomEnd}) {
    //console.log("performeMetricsCalculation", dataZoomStart, dataZoomEnd)
  
    return new Promise((resolve, reject) =&gt; {
      dispatch('performSetRangeTime', {dataZoomStart: dataZoomStart, dataZoomEnd: dataZoomEnd}).then(() =&gt; {
        dispatch('performMetrcisUpdating').then(() =&gt; {
          commit('resetUpdateStatus')
        })
      })
      resolve()
    })
  },
  
  performMetrcisUpdating({commit}) {
    return new Promise((resolve, reject) =&gt; {
      commit('calculateMetrics')
      resolve()
    })
  },
  </code></pre>
  
  <p>During debugging I printed the <code>metrics</code> variable and I see that the data differers from the initial one. But the table doesn't updates. </p>
  
  <p>In <code>mutations</code> I use the following logic</p>
  
  <pre><code>calculateMetrics({portfoliosData, period, status}) {
    let updatedMetrics = []
  
    for (let s in portfoliosData.performance) {
      if (portfoliosData.performance.hasOwnProperty(s)) {
        //console.log("Calculate metrics", period.startDateIdx, period.endDateIdx)
        let port = {...portfoliosData.performance[s]}
  
        updatedMetrics.push({
          name: port.name,
          maxDd: maxDrawdown(port.data, period.startDateIdx, period.endDateIdx),
          acRet: accumulativeReturn(port.data, period.startDateIdx, period.endDateIdx),
          anRet: annualReturn(port.data, period.startDateIdx, period.endDateIdx),
          anVol: annualVolatility(port.data, period.startDateIdx, period.endDateIdx),
          sRatio: sharpeRatio(port.data, period.startDateIdx, period.endDateIdx),
          inRatio: informationRatio(port.data, period.startDateIdx, period.endDateIdx)
        })
  
        if (!status.isUpdated) {
          portfoliosData.metrics = updatedMetrics
        } else {
          Vue.set(portfoliosData, 'metrics', updatedMetrics)
        }
      }
    }
  }
  </code></pre>
  
  <p>When I get the data without performing an action there is no problem with updating the table. However when I want to update the table the new data doesn't render, although the <code>metrics</code> variable changes. That looks weird.</p>
  
  <p>I observe this issue only in this specific case. Also I tried to change <code>:items="metrics"</code> to <code>:items=$store.getters.getMetrics</code> but it didn't help me either.</p>