Why the component(s) are not rendered which are added after the first empty element(or self-closing) component | Vue 3

Question

I was doing some experiments with Vue. When I add the same component multiple times with different properties it renders only once. I investigated and come to know that it didn't render the component after adding the first self-closing style component.

I don't know what is going on here.

FYI- I am using Vue 3. but I think it is also not working with Vue 2.

here is the code.

let Counter = {
    props: {
        count: {
            type: Number,
            required: true 
        }
    },
    template: `
        <span>{{ count }}</span>
    `
}
const app = Vue.createApp({
    components: {
        'counter': Counter
    },
});

const vm = app.mount("#app");

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
    <counter :count="1"></counter>
    <br />
    <counter :count="2" />
    <br />
    <counter :count="3"></counter>
</div>

In this code, the app will only render 1 and 2 but as soon it reached the first self-closing component then the next component will never be rendered. i.e 3 is not render.

Answer 1

Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates.
Components that self-close communicate that they not only have no content, but are meant to have no content. It’s the difference between a blank page in a book and one labeled “This page intentionally left blank.” Your code is also cleaner without the unnecessary closing tag.
Unfortunately, HTML doesn’t allow custom elements to be self-closing - only official “void” elements. That’s why the strategy is only possible when Vue’s template compiler can reach the template before the DOM, then serve the DOM spec-compliant HTML.

https://v2.vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

Also note, that counter is not a legal component tag name, component tag names must be at least two-word.