Add Vue-Component in existing Homepage with script type="module"

I'm currently using VueJS on an exiting Flask (Server-rendered) Homepage. I want to import a VueJS Component with the script-tag. The VueJS-Component should access to an API-Function from a third JS-file. The Cue-Component-File looks like this:

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
    }
});

Option 1:

In a template file I'm able to import a VueJS-Component like this:

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

But if I import the component with the type="text/javascript", I can't use a function from an extra api.js file inside of the component like this:

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

The console prints the error:

Uncaught SyntaxError: Cannot use import statement outside a module

Option 2

Second option I tried is to import the component with type="module" like this:

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

So I'm able to use the getContactsForNewMessageAPI() function, but the VueJS-component won't be rendered anymore. The following error occurs:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Has anyone a solution for this?