title: Watching array stored in Vuex in VueJS
body: <p>I have a customer list which is actually an array of objects. I store it in Vuex. I render the list in my component and each row has a checkbox. More precisely I use keen-ui and the checkbox rendering part looks like: </p>
  
  <pre><code>&lt;tr v-for="customer in customers" :class="{ selected: customer.selected }"&gt;
      &lt;td&gt;
        &lt;ui-checkbox :value.sync="customer.selected"&gt;&lt;/ui-checkbox&gt;
      &lt;/td&gt;
      &lt;td&gt;{{ customer.name }}&lt;/td&gt;
      &lt;td&gt;{{ customer.email }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>So the checkbox directly changes customers array which is bad: I use strict mode in Vuex and it throws me an error. </p>
  
  <p>I want to track when the array is changed and call an action in order to change the vuex state:</p>
  
  <pre><code>watch: {
   'customers': {
    handler() {
      // ...
    },
  
    deep: true
  }
  </code></pre>
  
  <p>However it still changes the customer directly. How can I fix this?</p>