How to correctly set the structure of the components?

Question

Vue.js

When templates are included in this way, only the header-black-component component is shown. But if you wrap all the components in a div, everything is displayed as it should. What's wrong?

<template>
     <header-black-component></header-black-component>
    <div class="content" id="content">
        <breadcrumbs-component :breadcrumbs="breadcrumbs"></breadcrumbs-component>
        <div class="buffer"></div>
    </div>
     <footer-component></footer-component>
</template>

Answer 1

There must be only one root element. And now you have three.