How to render nested structures with unknown nesting in Vue?

Question

Vue.js

Goodnight.
Task: render a category tree with a visual display of nesting, and even inside the select. Top categories should denote groups of categories. A trifling, in fact, task, but on Vue I thought.
The v-if and v-for directives are not flexible by themselves. How, for example, to take into account the infinite nesting? How to do recursion? And how, for example, to render wrappers over the options of the upper categories (in the material ui component, the group is a separate type of component, inside which child options are nested)?

- category
-- category 2
--- category 3
-- category 4
- category 5

One solution seems to be JSX, which gives you the flexibility you need. But I have single-file components, and it turns out that some components will have to be done differently, moving away from the given code-style, which is not desirable.
In general, how can this be done in Vue?
Thanks in advance.

Answer 1

a single-file component can use itself if it has a name.
More details here - https://vuejs.org/v2/guide/components-edge-cases.h...
Tree from docks - https://vuejs.org/v2/examples/tree-view.html