HTML-тег меню дерева vue.js выглядит лучше

Question

Я пытаюсь организовать древовидное меню с помощью vue.js,
, но есть проблема с получением большего количества тегов HTML.

Тег '<' ul '>' становится компонентом дерева инижний тег '<' li '>' становится определением шаблона для вывода на узел дерева в качестве слота с областью действия.

Внутри среза с областью выведите форму узла, используя переданные данные контекста (элемент).

Тег, в который нужно добавить поддерево, становится компонентом ChildTree.
Затем шаблон печатается рекурсивно.

Меню примечаний https://jsfiddle.net/q31o7w9f/16/

[FolderView.vue]
<nav id="contract_navi">
<ul is="tree" :data="treeData" class="root_list">
            <li slot-scope="{ item, index, depth }">
                <a href="#" @click="$set(item,'showChildren',!item.showChildren)">
                    <i class="folder"></i>{{item.name}}</a>
                <ul style="display:block">
                    <li><a href="#">
                        <l is="childTree" :data="item.children" v-show="item.showChildren"/>
                    </a></li>
                </ul>
            </li>
        </ul>
</nav>


[tree-div.js]
export default function install(Vue) {
    Vue.component('tree', {
        name: 'tree',
        props: ['data', 'tag', '_depth'],
        isActive: false,
        render(h) {
            var data = this.$props.data || []
            var tag = this.$props.tag || this.$vnode.data.tag || 'ul'
            var depth = this.$props._depth || 0
            var slot = this.$scopedSlots.default

            var children = data.map((d, i) => {
                var context = {item: d, index: i, depth: depth}
                return slot(context)
            })
            return h(tag, children)
        }
    })

    function findParentTree(vm) {

        if (!vm)
            return null
        if (vm.$vnode && vm.$vnode.componentOptions &&
            vm.$vnode.componentOptions.tag === 'tree')
            return vm
        if (!vm.$parent)
            return null
        return findParentTree(vm.$parent)
    }

    Vue.component('childTree', {
        name: 'childTree',
        props: ['data', 'tag'],
        render(h) {

            var parentTree = findParentTree(this)
            console.log("BANG3392==" + parentTree)
            if (!parentTree)
                return h('')

            var data = this.$props.data || []
            var tag = this.$props.tag || this.$vnode.data.tag || 'ul'
            var parentDepth = parentTree.$props._depth || 0
            var slot = parentTree.$scopedSlots.default

            if (!slot)
                return h(tag)

            return h('tree', {
                props: {data: data, tag: tag, _depth: parentDepth + 1},
                scopedSlots: {default: slot}
            })
        }
    })
}

В настоящее время это структура HTML.

<ul data-v-b7d6ea10="" class="root_list">
    <li data-v-b7d6ea10="">
        <a data-v-b7d6ea10="" href="#">
            <i data-v-b7d6ea10="" class="folder"></i>Test</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10="">
                <a data-v-b7d6ea10="" href="#">
                    <l data-v-b7d6ea10="" style="">
                        <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>bang1</a>
                            <ul data-v-CCb7d6ea10="" style="display: block;">
                                <li data-v-b7d6ea10="">
                                    <a data-v-b7d6ea10="" href="#">
                                        <l data-v-b7d6ea10="" style="display: none;"></l>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </l>
                </a>
            </li>
        </ul>
    </li>
    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>TEST2</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#">
                <l data-v-b7d6ea10="" style="display: none;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>BANG1</a>
                <ul data-v-b7d6ea10="" style="display: block;">
                    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#">
                        <l data-v-b7d6ea10="" style=""></l>
                    </a></li>
                </ul>
            </li>
            </l></a></li></ul>
    </li>
</ul>

Но структура, которую я хочу построить, это

<ul data-v-b7d6ea10="" class="root_list">
    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>Test</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>bang1</a>
            </li>
        </ul>
    </li>
    <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>TEST2</a>
        <ul data-v-b7d6ea10="" style="display: block;">
            <li data-v-b7d6ea10=""><a data-v-b7d6ea10="" href="#"><i data-v-b7d6ea10="" class="folder"></i>BANG1</a>
            </li>
        </ul>
    </li>
</ul>

Помоги мне из глубины.