Vue3で複数コンポーネント表示

Vue.js ver3で複数コンポーネントを表示する方法

index.html

<div id="app">
       <my-header></my-header>
       <p>コンテンツ</p>
       <my-footer></my-footer>
</div>
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
<script src="my-header.js"></script>
<script src="my-footer.js"></script>
<script src="main.js"></script>

my-header.js

const myHeader = {
   template: '<p>ヘッダーです</p>',
}

my-footer.js

const myFooter = {
   template: '<p>フッターです</p>',
}

main.js

Vue.createApp({
   data: function () {
       return {}
   },
   components: {
       'my-header': myHeader,
       'my-footer': myFooter
   }
}).mount('#app')