Flow.vue

<style>
</style>

<template>
<script type="text/x-template" id="item-template">
<li>
	<div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType"> 
		{{model.name}}
		<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
	</div>
	<ul v-show="open" v-if="isFolder">
		<item class="item" v-for="model in model.children" :model="model"></item>
		<li @click="addChild">+</li>
	</ul>
</li>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<ul id="demo">
	<item class="item" :model="treeData"></item>
</ul>


</template>

<script>

Vue.component('item', require('./Item.vue'));

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' }
			]
		}
		]
	}
	]
}

export default {
	data: {
		treeData: data
	}
}

</script>