title: Model binding when passing arrays to child component
body: <p>I'm trying to do a simple thing.  I have a table of entities, and each entity has a checkbox. Plus, in the table header, there is a global checkbox, so that I can select all of the entities at once.</p>
  
  <p>When I work with static data there is no problem, everything works as expected. For example: </p>
  
  <pre><code>data() {
    allUnitsSelected: false,
    units: [
      {
        selected: false
      },
      {
        selected: false
      },
      {
        selected: false
      },
    ]
  },
  
  watch: {
    allUnitsSelected() {
      this.units.forEach((unit) =&gt; {
        unit.selected = this.allUnitsSelected
      })
    }
  }
  </code></pre>
  
  <p>And HTML: </p>
  
  <pre><code>&lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;input type="checkbox" v-model="allUnitsSelected"&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr v-for="unit in units" :class="{ selected: unit.selected }"&gt;
      &lt;td&gt;
        &lt;input type="checkbox" id="checkbox" v-model="unit.selected"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>But when I pass this array as a component property it stops working. Basically I retrieve an object from server, which has units array, and I pass this object to component. Doesn't matter if I pass an object or array. Something like this:</p>
  
  <pre><code>export default {
    props: ['item'],
    data() {
       allUnitsSelected: false
    }
  }
  </code></pre>
  
  <p>In HTML I use item.units instead of just units. The v-for works and I got item list, however I can't update their "selected" property. In chrome dev tools in Vue inspector I can see that the property gets updated, but the checkbox does not.</p>
  
  <p>Why might this happen?</p>
  
  <p>Thanks in advance</p>