Why does Vue only render the first element?

Question

HTML

I don't understand what's going on, but for some reason Vue only renders the first element. Let's say this is the code:

<div id="app">
    <app/>
    <designer ref="designer"/>
    <higlighter ref="higlighter"/>
    <context-menu ref="context_menu"/>
</div>

Here is the javascript:

const app = new Vue({
    el: '#app',
    components: { App, Designer, Higlighter, ContextMenu}
});

In this case, Vue will only render the first element. All the rest disappear altogether, you can rearrange them, then any other one standing first will be rendered, and the rest also disappear. There are no errors in the console.
Moreover, if you take and shove the three remaining components into the first one, for example, into App, then they are already rendered normally there. What, is there some condition that there should be only one component at the root or what? I did not see anything like that in the documentation, some kind of nonsense.

Answer 1

Because in html, not every tag can be self-closing, and if it can’t, and you designed it that way, then it is considered by the browser as opening, and everything that follows it gets inside the element. That is, your app element has a designer child element, it also has a higlighter child element, which has a context-menu inside. In this form, your template gets to Vue.
So close the tags, or use something else instead of a dom template - a template property, a render function, single-file components.