Vue.js - Add or set new data to array in store
<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>