I'm currently working with a class-style component using the vue-property-decorator plugin. I want to create a recursive component that can use itself within its own structure. Here's a snippet of my code:
<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>
When I try to use TreeNode within the components option, I get an error saying 'TreeNode' was used before it was defined. How can I resolve this issue or is there an alternative approach to achieve the desired functionality?