【Vue.js3】コンポーネントタグで自己閉じタグを利用すると２個目のコンポーネントが読み込まれない

事象

以下のように自己閉じタグで複数のコンポーネントを読み込む場合、
２個目以降のコンポーネントが読み込まれない事象が発生することがあります
（後続のタグを前の自己閉じタグの内容と誤解釈してしまう）。

<test1-component /> <!-- 1つめのタグは読み込まれる -->
<test2-component /> <!-- 2つめ以降のタグは読み込まれない -->
<test3-component /> <!-- 読み込まれない -->

原因

Vueコンポーネントのタグは自己閉じタグが利用できる要素ではないため、
ブラウザが適切な解釈をしないことがあります。
※HTMLの基本として、自己閉じタグが利用できる要素は決まっています
（<img /> <br /> <imput />など）。
　これ以外の要素に対して自己閉じタグを利用すると、ブラウザは予期しない
　解釈をすることがあります。
※開始タグと終了タグの間に何も内容を持たないことから、
　自己閉じタグが利用できる要素は「空要素」と呼びます。

解決

そのため、明示的に終了タグを記述することが推奨されています。

<test1-component></test1-component>
<test2-component></test2-component>
<test3-component></test3-component>

参考