title: Vuex - Update an entire array
body: <p>I have a Vue.js app. This app is using Vuex for state management. My store looks like this:</p>
  
  <pre><code>const store = new Vuex.Store({
      state: {
          items: []
      },
  
      mutations: {
          MUTATE_ITEMS: (state, items) =&gt; {
              state.items = items;
          }
      },
  
      actions: {
          loadItems: (context, items) =&gt; {
              context.commit('MUTATE_ITEMS', items);
          }
      }
    })
  ;
  </code></pre>
  
  <p>In my Vue instance, I have the following method:</p>
  
  <pre><code>loadItems() {
  
    let items = [];
    for (let I=0; I&lt;10; I++) {
      items.push({ id:(I+1), name: 'Item #' + (I+1) });
    }
    this.$store.dispatch('loadItems', items);
  },
  </code></pre>
  
  <p>When I run this, I notice that the item list in my child components are not getting updated. I suspect this is because of the reactivity model in Vue.js. However, I'm not sure how to update an entire array.  In addition, I'm not sure if I need to use <code>Vue.set</code> in my store mutation, store action, or in the Vue instance method itself. I'm slightly confused.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Items ({{ items.length }})&lt;/h1&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr v-for="item in items" :key="item.id"&gt;
                      &lt;td&gt;{{ item.id }}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import { mapState } from 'vuex';
  
      export default {
          computed: mapState({
              items: state =&gt; state.items
          })
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I update an entire Array that is centrally stored in Vuex in a Vue.js app? </p>