title: Vuejs - add property to each item in an array with reactivity
body: <p>I have banged my head against all kinds of walls for days and would love some help with this please.</p>
  <p>I am getting the following error but can't really see how what I'm doing has anything to do with vuex here:
  <code>[vuex] do not mutate vuex store state outside mutation handlers.</code></p>
  <p>In my vue component I define an empty array for future data I get from an external API.</p>
  <pre class="lang-js prettyprint-override"><code>data() {
     return {
        costCentres: [],
     };
  },
  </code></pre>
  <p>I have a watch on my vuex store object named <code>schedule</code> (which I've brought in using MapState... and also tried with a getter using MapGetter to see if that made any difference). In this watch I create my array costCentres, with each element consisting of about five properties from the API. I add two properties at this point (sections and tasks) which I intend to later populate, and which I need to be reactive so I do so in accordance with <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats" rel="nofollow noreferrer">the Vue reactivity documentation</a> which all the other questions I've found remotely like mine seem to reference.</p>
  <pre class="lang-js prettyprint-override"><code>watch: {
          schedule() {
              if (this.schedule.rows) {
  
                  this.costCentres = this.schedule.rows.filter((row) =&gt; {
                      return row.cells[
                          this.schedule.columnKeysByName[&quot;Cost Code&quot;]
                      ].value; // returns row if Cost Code value exists
                  });
  
                  this.costCentres.forEach((costCentre) =&gt; {
                      this.$set(costCentre, 'section', null);
                      this.$set(costCentre, 'task', null);
                  });
  
              }
          },
  </code></pre>
  <p><strong>The <code>this.$set</code> lines throw the earlier mentioned error for every element in the array.</strong></p>
  <p>When I later update the properties, the change is reactive so its just the flood of error messages that's got me beat. Obviously if I don't use <code>set</code> then I don't get reactivity.</p>
  <p>I have no idea how what I am doing is related to the vuex store as <code>costCentre</code> is a plain old data property.</p>
  <p>I've tried hundreds of variations to get this all work (including <code>this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })</code> which doesn't seem to work) and I've run out of options so any assistance would be greatly appreciated!</p>
  <p>(Please also let me know if I need to show more code - I was trying to keep this concise!)</p>