SOURCE

// demo data
var data = {
    name: 'My Tree',
    children: [
        {name: '1'},
        {name: '2'},
        {
            name: '3',
            children: [
                {
                    name: '3-1',
                    children: [
                        {
                            name: '3-1-1',
                            children: [{
                                name: '3-1-1-1'
                            }]
                        },
                        {
                            name: '3-1-2',
                            children: [{
                                name: '3-1-2-1'
                            }]}
                    ]
                },
                {name: '3-2'},
                {name: '3-3'},
                {
                    name: '3-4',
                    children: [
                        {name: '3-4-1'},
                        {name: '3-4-2'}
                    ]
                }
            ]
        }
    ]
}

// define the item component
Vue.component('item', {
    template: '#item-template',
    props: {
        model: Object
    },
    data: function () {
        return {
            open: false,
            cur: '',
        }
    },
    computed: {
        isFolder: function () {
            return this.model.children &&
                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: 'new stuff'
            })
        }
    }
})

// boot up the demo
var demo = new Vue({
    el: '#demo',
    data: {
        treeData: data
    }
})

<script type="text/x-template" id="item-template">
    <div>
        <select v-model="cur" @change="toggle">
            <option :value="model.name" v-for="(model, index) in model.children">{{model.name}}</option>
        </select>
        <input type="">
        
        
        <div v-show="open" v-if="isFolder">
            <item
                class="item"
                v-for="(model, index) in model.children"
                :key="index"
                v-if="model.name == cur"
                :model="model">
            </item>
        </div>
    </div>
</script>

<!-- the demo root element -->
<ul id="demo">
    <item
        class="item"
        :model="treeData">
    </item>
</ul>

body {
    font-family: Menlo, Consolas, monospace;
    color: #444;
}

.item {
    cursor: pointer;
}

.bold {
    font-weight: bold;
}

ul {
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
}