title: update data in my rendered template from my vuex store
body: <p>I'm doing a simple crud using <code>vue</code>, <code>vuetify</code> and <code>vuex</code>. but I am having a problem when updating my data that are already rendered in my template, the mutations in my store state work correctly, therefore these changes should be updated in my template, however they keep their previous state, the states in vuex are not reactive? Should not they listen if there is any change and change its value?</p>
  
  <p>this is my template where I use a getters from my store to be able to iterate in my table:</p>
  
  <pre><code>&lt;v-data-table
   :headers="headers"
   :items="categories"
   :search="search"
  &gt;
   &lt;template slot="items" slot-scope="props"&gt;
     &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
     &lt;td&gt;{{ props.item.description }}&lt;/td&gt;
     &lt;td&gt;
       &lt;v-btn icon class="mx-0" @click="editItem(props.item)"&gt;
         &lt;v-icon color="teal"&gt;edit&lt;/v-icon&gt;
       &lt;/v-btn&gt;
       &lt;v-btn icon class="mx-0" @click="deleteItem(props.item)"&gt;
         &lt;v-icon color="pink"&gt;delete&lt;/v-icon&gt;
       &lt;/v-btn&gt;
     &lt;/td&gt;
   &lt;/template&gt;
   &lt;/v-data-table&gt;
  </code></pre>
  
  <p>this is the script of my component (a summary):</p>
  
  <pre><code>import { mapGetters } from 'vuex'
  
    export default {
      name: 'category',
      data: () =&gt; ({
        dialog: false,
        search: '',
        headers: [
          { text: 'Name', value: 'name' },
          { text: 'Description', value: 'description' },
          { text: 'Actions', value: 'name', sortable: false }
        ]
      }),
      computed: {
        ...mapGetters([
          'categories'
        ])
      }
    }
  </code></pre>
  
  <p>and this a summary of my store, as I mentioned before all the mutations that I perform work and the state is modified according to the type of mutation that is made, but this is not reflected in my template,  there is something that I am not handling correctly of vuex ?</p>
  
  <pre><code>const state = {
    categories: []
  }
  
  const mutations = {
    GET_CATEGORIES(state, categories) {
      state.categories = categories.reverse()
    },
  
    ADD_CATEGORY(state, category) {
      state.categories.unshift(category)
    },
  
    UPDATE_CATEGORY(state, category) {
      const index = state.categories.findIndex(x =&gt; x.id == category.id)
      state.categories[index] = { ...state.categories[index], ...category }
    },
  
    DELETE_CATEGORY(state, category) {
      state.categories.splice(category, 1)
    }
  }
  </code></pre>