SOURCE

 Vue.component('item',{
   	name:'item',
   	props:{
      model:[]
    },
   	data:{
      childList:[]
    },
    methods:{
			toggle:function(index){
        var item = model[index];
        	if(!(item.children&&item.children.length)){
            	return;
          }
          this.$set(childList,index,!childList[index]);
      }
    },
   	template:`
		 <ul class="tree-title">
         <li class="node" v-for="(item,index) in model" :key="index" @click="toggle(index)">
						{{item.name}}
				</li>
        <transition>
          <item :model="model.children" v-if="childList[index]"></item>
        </transition>
      </ul>
		`
 })
// demo data
var data = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]
}
var vm = new Vue({
  el: '#el',
  data: {
    items:data
  },
  components:{
  	item
	}
})

    <div id="el">
        
      <item :model="items"/>
    </div>

#el{
  background:white;
}