Vue计算的属性已更新，但组件未重新呈现

Question

我正在用异步加载到vuex存储中的数据填充vuetify数据表。 用户输入可以更改存储，在这种情况下，我可以dispatch执行一个操作，以异步方式提取一些数据，然后commits进行更改。

要处理加载数据时的组件状态，我在存储中使用了loading标志。加载数据时，将其设置为loading，以便数据表呈现为空

...
computed: {
  ... // a fairly long list of interdependent computed properties
  loading() {
    return store.state.loading
  },
  dataToDisplay() {
     if(this.loading){
        return []
     } else{
        return store.state.data
     }
  }
}

这很好用，但是有时数据表组件不会更新，即使提供它的计算属性已更新（请参见vue dev工具的屏幕截图）。

对于为何不更新计算属性的问题，有几个答案（here，here）。但是什么能解释计算出的属性确实更新正确，但组件没有重新渲染？如何修复它？

有人用:key提到了here，但我尝试过，但表格内容仍未更新。

[edit]提供数据表代码

<v-data-table 
   :key="loading"
   :headers="headers"
   :items="dataToDisplay"
   :item-key="itemId"
   disable-pagination hide-default-footer
>
  <template v-slot:item="row">
  <tr>
    <td class="text-xs-right">{{ row.item.currentCondition }}</td>
    <td class="text-xs-right">{{ row.item.nextCondition }}</td>
    <td class="mx-2">
      <v-btn icon class="mx-0" @click="editItem(row.item)">
        <v-icon color="teal">mdi-pencil</v-icon>
      </v-btn>
      <v-btn icon class="mx-0" @click="deleteItem(row.item)">
        <v-icon color="pink">mdi-delete</v-icon>
      </v-btn>
    </td>
  </tr>
  </template>
</v-data-table>

Answer 1

您可以使用由函数填充的数据属性items: null，然后使用v-data-table将它们加载到v-for: (item, i) in items中

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :loading="loading"
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          { text: 'Name', align: 'start', value: 'name'},
          { text: 'Description', value: 'desc' },
        ],
        items: null,
        loading: true
      }
    },
    created: {
      addData() {
        this.items = store.state.data
        this.loading = store.state.loading
      }
    }
  }
</script>