Recursion in single file components in Vue.js 3

Question

How to use recursive components in Vue3?

Using recursive components like normal components in Vue 3 will result in errors Cannot be accessed before initialization

Tree.vue：

<template>
  <Tree v-if="hasChildren" />
</template>

<script lang="ts">
import Tree from './Tree.vue';

export default defineComponent({
  components: {
    Tree
  },

  setup() {

    const hasChildren = someExitRecursionCondition();

    return {
      hasChildren
    }
  }
</script>

Answer 1

You can provide only the component name option:

sssccc

Answer 2

document:

Components can be imported by their filename, but do not need to be listed in the components settings object. However, it is enough to use the named component in the template without importing it.

Tree.vue：

sssccc