使用 script type="module" 在现有主页中添加 Vue-Component

Question

我目前在现有的 Flask（服务器渲染）主页上使用 VueJS。我想用脚本标签导入一个 VueJS 组件。VueJS 组件应该从第三个 JS 文件访问 API 函数。Cue-Component-File 如下所示：

import {getContactsForNewMessageAPI} from "../../api/contactsAPI";

Vue.component('new-message-modal', {
    data: function () {
        return {
            selectFieldOptions: [],
            //... further attributes
        }
    },
    methods: {
        async getContacts(){
            this.selectFieldOptions = await getContactsForNewMessageAPI();
        },
        //... further methods
    }
});

选项1：

在模板文件中，我可以像这样导入 VueJS-Component：

import {getContactsForNewMessageAPI} from "../../api/contactsAPI";

Vue.component('new-message-modal', {
    data: function () {
        return {
            selectFieldOptions: [],
            //... further attributes
        }
    },
    methods: {
        async getContacts(){
            this.selectFieldOptions = await getContactsForNewMessageAPI();
        },
        //... further methods
    }
});

但是，如果我使用 type="text/javascript" 导入组件，则无法使用组件内部的额外 api.js 文件中的函数，如下所示：

<script type="text/javascript" src="js/ui/newMessageVueComponent.js"></script>

控制台打印错误：

未捕获的语法错误：无法在模块外使用导入语句

选项 2

我尝试的第二个选项是像这样导入带有 type="module" 的组件：

import {getContactsForNewMessageAPI} from "../../api/contactsAPI";

所以我可以使用该getContactsForNewMessageAPI()函数，但 VueJS 组件将不再呈现。出现以下错误：

未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

有没有人解决这个问题？