vue.js - `未定義のプロパティを読み取れません (「コンポーネント」を読み取っています)`

Question

エラー：Cannot read properties of undefined (reading 'component')

私はvue.js3 + laravel8に取り組んでいます

再利用した my-button コンポーネントをグローバル コンポーネントとして登録しようとしています

vue.js3 + lorevel8

私のapp.js

window.Vue = require('vue').default;
import { createApp } from 'vue';
import router from "./router";
import components from './components/UI'

components.forEach(component => {
    app.component(component.name, component)
})

const app = createApp({})
app.use(router)
   .mount("#app")

私のIndex.js

import MyButton from "./MyButton";


export default  [
    MyButton
]

私のボタン.vue

<template>
    <button class="btn">
        <slot></slot>
    </button>
</template>


<script>
export default {
    name: "my-button"
}
</script>

<style scoped lang="scss">

.btn {
    background-color: var(--color-primary-light);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family:'Josefin Sans', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 1.8rem 3rem;
    cursor: pointer;
    transition: all .2s;

&:hover {
     background-color: var( --color-primary-dark);
 }
}

</style>

エラー: 未定義のプロパティを読み取れません (「コンポーネント」を読み取っています)

誰でも私を助けてくれますか？

未定義のプロパティを理解できません