Quasar Table not updating (v1)

Question

I have a Quasar Table where the data property is connected to a Vuex state (an array of objects). When the state of an object (a row in the table) changes, this change is not visible in the table. If I look with the Vue dev tools, the strange thing is that the QTable Data prop does change but the computedData.rows and the computedRows do not update.

How can I force an update to the table rows? I want the changes to be visible in the table.

In the picture below you can see the table row is not updated but the table's data prop has the updated property.

In the 2nd picture you can see the computerData.rows property is not updated. The same is true for the computerRows property of the table.

Below is the way the QTable is defined

<q-table
  :data="users"
  :columns="columns"
  :selection="showSelectors ? 'multiple' : 'none'"
  :selected.sync="selected"
  :pagination.sync="pagination"
  @update:pagination="pageChanged"
  hide-header
  row-key="id">
  <template v-slot:body="props">
    <q-tr :props="props" @click.native="click(props.row)" v-touch-hold.mouse="longPress">
      <q-td auto-width v-if="showSelectors">
        <q-checkbox dense v-model="props.selected" />
      </q-td>
      <q-td key="name" :props="props">{{ props.row.name }}</q-td>
      <q-td key="phone" :props="props">{{ props.row.phone }}</q-td>
    </q-tr>
  </template>
 </q-table>

Below is the code for the input fields:

<q-card class="q-pa-md" v-if="showDetails && !showSelectors" style="margin: 10px 0;" >
    <q-icon name="eva-close-circle-outline" class="float-right close-icon" @click="cardClose"/>
    <q-input label="Name" color="negative" stack-label v-model="name" />
    <q-input label="Phone number" color="negative" stack-label v-model="phone" />
    <q-input label="Remarks" color="negative" stack-label v-model="remarks" />
    <q-select color="negative" v-model="locks" :options="Locks" label="Locks" multiple @input="selectLock"/>
    <q-select color="negative" v-model="schedules" :options="Schedules" label="Schedules" multiple @input="selectSchedule" />
    <q-select color="negative" v-model="keys" :options="Keys" label="Keys" multiple @input="selectKey" />
 </q-card>

And here are my computer properties. Name and Phone are the properties you see in the table. When you click on a table row, the currentUser is set for the form below the table. This is done by this.$store.commit('users/setCurrentUser', row)

computed: {
...mapState({
  users: state => state.users.users,
  currentUser: state => state.users.currentUser,
}),
name: {
  set (name) {
    this.$store.commit('users/setCurrentUser', { name })
    // this.$refs.table.computedData.rows = this.users
  },
  get () {
    return this.currentUser.name
  }
},
phone: {
  set (phone) {
    this.$store.commit('users/setCurrentUser', { phone })
  },
  get () {
    return this.currentUser.phone
  }
},

Lastly here is the code from the Vuex store:

import { getUsers, saveUsers } from '../helpers/database'

export default {
  namespaced: true,
  state: {
    users: [],
    currentUser: {}
  },
  mutations: {
     setUsers (state, users) {
        state.users = users
     },
     setCurrentUser (state, payload) {
       state.currentUser = Object.assign({}, state.currentUser, payload)
       const index = state.users.findIndex(u => u.id === state.currentUser.id)
       state.users[index] = state.currentUser
       saveUsers(state.users)
     }
  },
  actions: {
    getUsers ({ commit }) {
      getUsers()
      .then(result => {
        if (!result) {
          saveUsers(seedUsers)
          commit('setUsers', seedUsers)
        } else {
          commit('setUsers', result)
        }
      })
    }
  }
}

Answer 1

I suggest the following solution by forcing Vue to re-render a component via key-changing

<q-table
    :key="tableKey"
...
>
...
</q-table>

data() {
      return {
        tableKey: 0,
}
},
   methods: {
    updateData() {
// Vuex logics or others
      this.tableKey = 1
}
},