ผมต้องการเพิ่มโหนดเข้าไปใน tree ผมต้องเขียนยังไงครับ รบกวนด้วยนะครับ

https://codepen.io/anon/pen/yRvzxL?editors=1010

HTML
<div id="app">
<tree :data="json" :link="json"></tree>
</div>


JS
let json = {
  nodeA: {
    nodeA1 : "valueA1",
    nodeA2 : "valueA2"
  },
  nodeB: "valueB",
  nodeC: {
    nodeC1 : "valueC1",
    nodeC2 : "valueC2"
  }
};

Vue.component('tree', {
  name: 'treeview',
  props: [
    'data',
    'link'
  ],
  template: `<ul>
        <li v-for="val, key) in data">
            <span @click="toggle(key)">{{key}}</span>
            <tree v-if="!isLeaf(val)" v-show="show[key]" :data="val" :link="link[key]">
            </tree>
        </li>
    </ul>`,
  data: function() {
    return {
      show: {}
    };
  },
  methods: {
    isLeaf: function(node) {
      return typeof node != 'object';
    },
    toggle: function(node) {
      if(this.show[node]){
        this.$set(this.show, node, false)
      } else {
        this.$set(this.show, node, true)
      }
    }    
  }
});

new Vue({
  el: '#app',
  data: {
    json: json
  }
});

ขอบคุณครับ