Vue computed property updated, but component did not re-render

Question

I am filling a vuetify data-table with data loaded asynchronously into a vuex store. User input can change the store, in which case I dispatch an action, that pulls some data asynchronously and commits changes.

To handle the component state when data is loading, I use a loading flag in the store. When the data is being loaded, it is set to loading so that the data table renders as empty

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

This works well, but sometimes the data-table component does not update, even though the computed property that feeds it is updated (See screenshot of vue dev tools).

There are several answers about why computed properties do not update ( here , here ). But what can explain that the computed property did update correctly, but the component did not re-render? How to fix it?

Someone mentioned here using a :key I tried that but the table content is still not updating.

[edit] providing the data-table code

<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

You could use a data attribute items: null which gets filled by your function and load them into your v-data-table using 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>