Ув. знатоки, помогите пожалуйста проблема не типичная. Есть 2 компонента List

и Item. Оба рендерят друг друга рекурсивно (List > Item > List > item), т.е. должна получится вот такая структура

<list>
<item>
<list>(*)
<item>
<item>

Но на этапе отмеченным (*) вылезает ошибка

Unknown custom element: <list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Требование рекурсивности (т.е. наличие "name" у компонентов) выполнено, см. код

Компонент List.vue
// List.vue
<template lang="pug">
ul
item
</template>

<script>
import Item from './Item.vue'
export default {
name: 'list',
components: { Item },
props: {
deep: { type: Boolean, default: true }
}
}
</script>

Компонент Item.vue
// Item.vue
<template lang="pug">
li
a item
list(:deep='false')
</template>

<script>
import List from './List.vue'
export default {
name: 'Item',
components: { List }
}
</script>

Ну, народ, неужели ни у кого даже вариантов?