Recursive component using Vue class-style components

Question

I am using class-style component with vue-property-decorator plugin. How can i have a recursive component and use component in itself. my code is like below:

<template>
<ul>
    <li>
        <div>
            {{nodeData.someData}}
        </div>
    </li>
    <li>
        <TreeNode
        v-for="item in nodeData.children"
        :key="item.id"
        ></TreeNode>
    </li>
</ul>
</template>

<script lang="ts">

import {Vue, Prop, Component, Watch} from 'vue-property-decorator';

@Component({
//error :'TreeNode' was used before it was defined.
   components:{TreeNode}
})
export default class TreeNode extends Vue {

   @Prop() nodeData?: myType;

}

</script>

using TreeNode in components option causes error: 'TreeNode' was used before it was defined. how can i fix it? or what is the alternative way?

Answer 1

That's a recursive component: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components

@Component({
    name: "TreeNode",
})
...

Source: https://stackoverflow.com/a/62794715