title: Update data using vuex
body: <p>As Vuex, I'm trying to update an object using form.
  My code like this.</p>
  
  <p>In store:</p>
  
  <pre><code>const state = {
     categories: []
  };
  
  //mutations:
  [mutationType.UPDATE_CATEGORY] (state, id, category) {
      const record = state.categories.find(element =&gt; element.id === id);
      state.categories[record] = category;
  }
  
  //actions:
  updateCategory({commit}, id, category) {
    categoriesApi.updateCategory(id, category).then((response) =&gt; {
      commit(mutationType.UPDATE_CATEGORY, id, response);
      router.push({name: 'categories'});
    })
  }
  </code></pre>
  
  <p>Template in .Vue file:</p>
  
  <pre><code>    &lt;form&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="Name"&gt;Name&lt;/label&gt;
          &lt;input
            type="text"
            class="form-control form-control-sm"
            name="name"
            v-model.lazy="category.name" required&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="Slug"&gt;Slug&lt;/label&gt;
          &lt;input
            type="text"
            class="form-control form-control-sm"
            name="slug"
            v-model.lazy="category.slug" required&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="Avatar"&gt;Avatar&lt;/label&gt;
          &lt;input
            type="text"
            class="form-control form-control-sm"
            name="avatar"
            v-model.lazy="category.avatar" required&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="Description"&gt;Description&lt;/label&gt;
          &lt;textarea
            type="text"
            class="form-control form-control-sm"
            rows="5"
            name="description"
            v-model.lazy="category.description"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;button type="submit" @click.prevent="updateCategory" class="btn btn-outline btn-sm"&gt;Update&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>And in script:</p>
  
  <pre><code>export default {
      data() {
        return {
          category: {}
        }
      },
  
      methods: {
        getCategoryById(id) {
          axios.get(`categories/${id}`)
            .then(response =&gt; {
              this.category = response.data;
            })
            .catch(error =&gt; {
              console.log(error);
            })
        },
  
        // Using mutation.
        updateCategory() {
          this.$store.dispatch('updateCategory', this.$route.params.id, this.category);
          console.log(this.category); //Display exactly data changed.
        }
      },
  
      created() {
        this.getCategoryById(this.$route.params.id);
      }
  }
  </code></pre>
  
  <p>My problem is when I click Update. It nothing change.
  I did print <code>category</code> Object in console. It displays exactly what I expected.
  But after click Update button. It hasn't changed. </p>
  
  <p>Anyone can tell me why and give me solution?? Thanks.</p>