title: vue.js - recursive components doesn't get updated when using nested array from raw json
body: <p>I am trying to create a tree with an add function using computed data. I used the tree-view example in vuejs official homepage and combined it with the computed function that I created but found no luck in implementing it. I've been trying to solve this for 4 days already and still no luck so I am here looking for help.</p>
  
  <p>When you click the "+" in the end of the list it will trigger a call to the <code>addChild</code> function and it will successfully append the data. The data gets appended but the recursive component is not reactive.</p>
  
  <p><a href="https://jsfiddle.net/znedj1ao/9/" rel="nofollow noreferrer">https://jsfiddle.net/znedj1ao/9/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data2 = [{
      "id": 1,
      "name":"games",
      "parentid": null
    },
    {
      "id": 2,
      "name": "movies",
      "parentid": null
    },
    {
     "name": "iron-man",
      "id": 3,
      "parentid": 2
    },
    {
      "id": 4,
      "name": "iron-woman",
      "parentid": 3
    }
  ]
  
  // define the item component
  Vue.component('item', {
    template: '#item-template',
    props: {
      model: Object
    },
    data: function () {
      return {
        open: false
      }
    },
    computed: {
      isFolder: function () {
        return this.model.children &amp;&amp;
          this.model.children.length
      }
    },
    methods: {
      toggle: function () {
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeType: function () {
        if (!this.isFolder) {
          Vue.set(this.model, 'children', [])
          this.addChild()
          this.open = true
        }
      },
      addChild: function () {
         this.model.children.push({
          name: 'My Tres',
       children: [
         { name: 'hello' },
         { name: 'wat' }
          ]
        })
  
      }
    }
  })
  
  // boot up the demo
  var demo = new Vue({
    el: '#demo',
    data: {
      treeData2: data2
    },
    computed: {
     nestedInformation: function () {     
              var a= this.nestInformation(data2);
              return a;
          }
    
    },
    methods:
      {
          nestInformation: function(arr, parent){  
             var out = []
      for(var i in arr) {
          if(arr[i].parentid == parent) {
              var children = this.nestInformation(arr, arr[i].id)
  
              if(children.length) {
                  arr[i].children = children
              }
              out.push(arr[i])
          }
      }
      return out
      }
      }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- item template --&gt;
  &lt;script type="text/x-template" id="item-template"&gt;
    &lt;li&gt;
      &lt;div
        :class="{bold: isFolder}"
        @click="toggle"
        @dblclick="changeType"&gt;
        {{model.name}}
        &lt;span v-if="isFolder"&gt;[{{open ? '-' : '+'}}]&lt;/span&gt;
      &lt;/div&gt;
      &lt;ul v-show="open" v-if="isFolder"&gt;
        &lt;item
          class="item"
          v-for="model in model.children"
          :model="model"&gt;
        &lt;/item&gt;
        &lt;li class="add" @click="addChild"&gt;+&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/script&gt;
  
  &lt;p&gt;(You can double click on an item to turn it into a folder.)&lt;/p&gt;
  
  &lt;!-- the demo root element --&gt;
  &lt;ul id="demo"&gt;
    &lt;item
      class="item"
      :model="nestedInformation[1]"&gt;
    &lt;/item&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>