Why doesn't recursion work?

Question

Vue.js

I have 2 components.
In one of them, I want to call recursion in a loop to output a tree.
Recursion component:

<template>
  <div>
  <ul v-for="(asset, k) in sub" :key="k" class="q-my-none">
      <li class="q-px-md row justify-between items-center">
        <div class="cursor-pointer">
          {{ asset["name"] }}
        </div>
        <q-btn
          push
          color="white"
          text-color="primary"
          round
          icon="expand_more"
          flat
          class="q-my-xs no-shadow"
        />
        <recourse  v-if="asset.sub && asset.sub.length" :sub="asset.sub"></recourse>
      </li>
  </ul>
  </div>
</template>

<script>
import Recourse from "./Recourse";

export default {
  props: ['sub'],
components:{
  Recourse
}
};
</script>

There is no point in writing the call component and the array itself.
It outputs 1 nesting level.
But then it gives an error: Unknown custom element: <recourse>as if the component is not registered.
How to register it in the recursion component?

Answer 1

Because you didn't read the documentation carefully :

Components can call themselves recursively in their own template. However, they can only do this with the optionname