Друзья, помогите пожалуйста, очень странная проблема Есть 3 компонента - Tree,

List и Item
Tree ренедирит одни единственный List (в props данные для рекурсивного построения дерева), в List через цикл v-for ренедерятся Item компоненты. В компоненете Item ренеделится List и так далее, т.е. рекурсивно и должна получится вот такая структура
<Tree>
<List>
<Item>
<List>(*)
<Item>
<Item>
<Item>
<Item>
Но ничего не получается и вываливается ошибка
Unknown custom element: <list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Привожу примитивный пример кода который не работае
// Tree.vue
<template lang="pug">
div
list(v-model='data')
</template>

<script>
import List from './List.vue'
export default {
name: 'tree',
components: { List },
data () {
return {
data: [
{
title: 'Foo',
childs: [
{
title: 'Foo 1',
childs: [
{
title: 'Foo 1.1',
childs: []
},
{
title: 'Foo 1.2',
childs: []
}
]
},
...// and more
]
},
]
}
}
}
</script>
и еще
// List.vue
<template lang="pug">
ul
item(v-for='(item, index) in items', v-model='items[index]')
</template>

<script>
import Item from './Item.vue'
import {cloneDeep} from 'lodash'
export default {
name: 'list',
components: { Item },
props: {
value: Array
},
data () {
return {
items: cloneDeep(this.value)
}
}
}
</script>
и еще
// Item.vue
<template lang="pug">
li
a(href='#') {{ val.title }}
list(v-model='val.childs')
</template>

<script>
import List from './List.vue'
import {cloneDeep} from 'lodash'
export default {
name: 'item',
components: { List },
props: {
value: Object
},
data () {
return {
val: cloneDeep(this.value)
}
}
}
</script>
Заранее благодарю за любую помощь!

Вот это я сейчас делаю. Дерево из чекбоксов. Тебе компонент зарегистрировать надо в components:{}

https://vuejs.org/v2/examples/tree-view.html можно официальный пример из доков глянуть, мб поможет