title: How to structure nested reactive data in VUE
body: <p>I think this is a fairly common problem.
  You fetch a list from an api, and then you display that list via</p>
  
  <pre><code>&lt;div v-for="item in items"&gt;
      &lt;checkbox v-model="item.checked"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now My question is about the checked property. when iterating over a list of undefined length, of unknown keys, it seems the checked property has to be created and attached to the item object like so</p>
  
  <pre><code>computed: {
      items () {
          var newList = Object.assign([], this.rootList) // shallow clone the api list
          for (var i of newList) {
              i.checked = false
              // or
              Vue.set(i, 'checked', false)
          }
          return newList
      }
  </code></pre>
  
  <p>However this is not making my checkbox reactive. But more importantly, this way of adding new properties to the rootList object clone, is this the best practice? and if so, why is this not reactive? Even when using Vue.set</p>