title: Vue.js - Add or set new data to array in store
body: <p>I have two Vue components that use a common array set in a store like this:</p>
  
  <pre><code>var store = {
      state: {
          myArray: []
      }
  };
  
  var FirstComp = Vue.extend({
      template: '#first-template',
      data: function () {
          return {
              arrayData: store.state.myArray
          };
      }
  });
  
  /* A second component quite identical */
  </code></pre>
  
  <p>I followed the example given in the <a href="http://vuejs.org/guide/application.html#State-Management" rel="nofollow">Vue js guide</a>.</p>
  
  <p>I'm trying to update the data in the array in the store with new data from another array (after an ajax call), so that it impacts both components. I would like to have a nice way of replacing / concating the old array with a new one. I know I can't just replace the array like this <code>store.state.myArray = newArrayData;</code>because I would loose the Vue binding. But <a href="http://vuejs.org/guide/list.html#Replacing-an-Array" rel="nofollow">the method given in the docs</a> (at least for concat) doesn't work in the case of the store (or maybe I'm missing something?).</p>
  
  <p>Right now, the only way I've found is to use a foreach with <code>push</code>, <code>$remove</code>or <code>$set</code> depending on the operation and it is not that elegant and practical.</p>
  
  <p>For example, for concat, I do this:</p>
  
  <pre><code>$.each(newArray, function (i, val) {
      store.state.myArray.push(val);
  });
  </code></pre>
  
  <p>But for replacing it gets uglier. What would be the proper way to this?</p>
  
  <p>(For info, I'm not using Vuex for state management and I don't plan to at the moment, I'm keeping it very simple)</p>