title: Quasar Table not updating (v1)
body: <p>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.</p>
  
  <p><strong>How can I force an update to the table rows? I want the changes to be visible in the table.</strong></p>
  
  <p>In the picture below you can see the table row is not updated but the table's data prop has the updated property.</p>
  
  <p><a href="https://i.stack.imgur.com/r7cDS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r7cDS.png" alt="enter image description here"></a></p>
  
  <p>In the 2nd picture you can see the computerData.rows property is <strong>not</strong> updated. The same is true for the computerRows property of the table.</p>
  
  <p><a href="https://i.stack.imgur.com/e60lj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e60lj.png" alt="enter image description here"></a></p>
  
  <p>Below is the way the QTable is defined</p>
  
  <pre><code>&lt;q-table
    :data="users"
    :columns="columns"
    :selection="showSelectors ? 'multiple' : 'none'"
    :selected.sync="selected"
    :pagination.sync="pagination"
    @update:pagination="pageChanged"
    hide-header
    row-key="id"&gt;
    &lt;template v-slot:body="props"&gt;
      &lt;q-tr :props="props" @click.native="click(props.row)" v-touch-hold.mouse="longPress"&gt;
        &lt;q-td auto-width v-if="showSelectors"&gt;
          &lt;q-checkbox dense v-model="props.selected" /&gt;
        &lt;/q-td&gt;
        &lt;q-td key="name" :props="props"&gt;{{ props.row.name }}&lt;/q-td&gt;
        &lt;q-td key="phone" :props="props"&gt;{{ props.row.phone }}&lt;/q-td&gt;
      &lt;/q-tr&gt;
    &lt;/template&gt;
   &lt;/q-table&gt;
  </code></pre>
  
  <p>Below is the code for the input fields:</p>
  
  <pre><code>&lt;q-card class="q-pa-md" v-if="showDetails &amp;&amp; !showSelectors" style="margin: 10px 0;" &gt;
      &lt;q-icon name="eva-close-circle-outline" class="float-right close-icon" @click="cardClose"/&gt;
      &lt;q-input label="Name" color="negative" stack-label v-model="name" /&gt;
      &lt;q-input label="Phone number" color="negative" stack-label v-model="phone" /&gt;
      &lt;q-input label="Remarks" color="negative" stack-label v-model="remarks" /&gt;
      &lt;q-select color="negative" v-model="locks" :options="Locks" label="Locks" multiple @input="selectLock"/&gt;
      &lt;q-select color="negative" v-model="schedules" :options="Schedules" label="Schedules" multiple @input="selectSchedule" /&gt;
      &lt;q-select color="negative" v-model="keys" :options="Keys" label="Keys" multiple @input="selectKey" /&gt;
   &lt;/q-card&gt;
  </code></pre>
  
  <p>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 <em>currentUser</em> is set for the form below the table. This is done by <code>this.$store.commit('users/setCurrentUser', row)</code></p>
  
  <pre><code>computed: {
  ...mapState({
    users: state =&gt; state.users.users,
    currentUser: state =&gt; 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
    }
  },
  </code></pre>
  
  <p>Lastly here is the code from the Vuex store:</p>
  
  <pre><code>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 =&gt; u.id === state.currentUser.id)
         state.users[index] = state.currentUser
         saveUsers(state.users)
       }
    },
    actions: {
      getUsers ({ commit }) {
        getUsers()
        .then(result =&gt; {
          if (!result) {
            saveUsers(seedUsers)
            commit('setUsers', seedUsers)
          } else {
            commit('setUsers', result)
          }
        })
      }
    }
  }
  </code></pre>