Which difference make possible in Vue 3 recursive component can be rendered without specifying name explicitly?

[dante01yoon]

Greetings.

In Vue2, you can't render self-reference recursive component without name option specified.
Take a look example component TreeNode below .

<script>
export default {
  name: "TreeNode",
  props: {
    treeData: {
      type: Array,
      required: true,
    },
  },
};
</script>

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <!-- Check if the item has children and recursively call TreeNode component -->
      <TreeNode
        v-if="item.children && item.children.length"
        :treeData="item.children"
      />
    </li>
  </ul>
</template>

Code-sandbox

And data structure

const nestedData = [
  {
    id: 1,
    name: "Folder 1",
    children: [
      { id: 2, name: "File 1-1" },
      { id: 3, name: "File 1-2" },
    ],
  },
  {
    id: 4,
    name: "Folder 2",
    children: [
      { id: 5, name: "File 2-1" },
      {
        id: 6,
        name: "Folder 2-1",
        children: [
          {
            id: 7,
            name: "File 2-1-1",
            children: [
              {
                id: 8,
                name: "Folder 2-1-1",
                children: [{ id: 9, name: "File 2-1-1-1" }],
              },
            ],
          },
        ],
      },
    ],
  },
];

if you omit name, your component looks like will be shown like below.

In Vue3, If component don't reference self with<component :is="TreeNode"> , you can simply omit your name.

I wonder What makes this difference in Vue2, Vue3 name inference ?

Also, want to know details why <component :is="TreeNode"> also can't be implicitly inferred in Vue3.