各位大大好，小弟最近剛從vue2轉vue3
目前負責的案子上司要求使用cdn的方式引入Vue3就好
目前在Component遇到一點問題
因為之前都是用CLI的方式寫 在引入Component時都沒問題
但用CDN的方式突然就不知道該怎麼拆開後引入了

https://codepen.io/lai777/pen/JjErQyq?editors=1010

這是我希望能拆開的部分

有試過把它拆開到test.js

export default {
    name: 'app',

    setup() {
        const { reactive, ref } = Vue;
        /*Menu*/
        const menuSelected = ref('1')
        const menuList = ref([
            {
                id: 1,
                name: "測試01"
            },
            {
                id: 2,
                name: "測試02"
            },
            {
                id: 3,
                name: "測試03"
            },
            {
                id: 4,
                name: "測試04"
            },
            {
                id: 5,
                name: "測試05"
            },
            {
                id: 6,
                name: "測試06"
            }
        ]);
        return {
            menuList,
            menuSelected,
        }
    },



    components: {
        'my-component': {
            template: `
                <header>
                    <div>
                        <div class="menu">
                            <img class="logo" src="../image/logo.jpg" />
                            <div class="menuSearch">
                                <input type="text" placeholder="輸入關鍵字" />
                            </div>
                            <div class="menuButton">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                        <div class="menuSelect">
                            <ul>
                                <li class="menuSelectBotton"
                                    v-for="item in menuList"
                                    v-on:click="menuSelected = item.id"
                                    v-bind:class="{ activ: menuSelected == item.id}"
                                    :key="item.id">{{item.name}}</li>
                            </ul>
                        </div>
                    </div>
                </header>
            `,
        }
    }
};

然後在index.html引入

    <script type="module">
        import myComponent from '../../js/test.js'

        const App = {
            components: { myComponent },
            setup() {
                return {
                    myComponent,
                }
            }
        };

        Vue.createApp(App).mount("#app");
    </script>

畫面沒有出來

但如果改成這樣引入

    <script type="module">
        import app from '../../js/test.js'
        const { createApp } = Vue;
        createApp(app).mount('#app');
    </script>

畫面有出來，但是test.js裡面的template的v-for讀不到menuList，導致li印不出來

不知哪邊寫錯還請各位大大幫忙

另外想請問

const App = {
            setup() {
                return {
                    }
            }
        };

Vue.createApp(App).mount("#app");

/***********************************/

import app from '../../js/test.js'
const { createApp } = Vue;
createApp(app).mount('#app');

這兩種方法差別在哪呢？我看的課程是教上面那種用法，但我後來查的教學有些是用下面那種方法..看得我有點亂