Vuejs recursive component on Vueify

Question

Based on the Vuejs Documentation examples I am trying to do a simple treeview component where I can show a Chart of Accounts without any interection (no add no drag and drop... really simple).

I have made an example on FiddleJs but there works fine my example... I don't know why on my app I can't make it works! I don't know if it's some Vueify issues... may be you can help me!

There is my code:

OzChartTree.vue

<template>

    <ul v-if="model.length">
        <li v-for="m in model" :class="{ 'is-group': m.children }">
            {{ m.name }}
            <ul v-if="m.accounts">
                <li v-for="a in m.accounts">
                    {{ a.name }}
                </li>
            </ul>
            <oz-tree :model="m"></oz-tree>
        </li>
    </ul>

</template>

<script type="text/babel">

    import OzChartTree from './OzChartTree.vue'

    export default {

        components: {
            OzTree: OzChartTree
        },

        props: {
            model: Array,
        }

    }

</script>

Where I call the first time the tree view component

<oz-chart-tree :model="chart"></oz-chart-tree>

The problem is when I call recursively the component on ja .vue file.

As it's above I got the following error:

app.js:23536 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

But is is properly registered as OzTree! I can't understand!

Somebody have any idea?

Answer 1

<script type="text/babel">

    import OzChartTree from './OzChartTree.vue'

    export default {
        name: 'oz-tree-chart', // this is what the Warning is talking about.

        components: {
            OzTree: OzChartTree
        },

        props: {
            model: Array,
        }

    }

</script>