Javascript 导入外部单文件组件时出现问题（通过Vue CLI）

我正在学习Vue，并尝试使用Vue cli构建第一个应用程序。 我有简单的本地组件，运行良好。 但是当我想使用外部组件时，我遇到了一个问题。 例如“vuetable-2”。 我使用终端通过npm本地安装：

npm install --save vue-multiselect 

安装成功，“vue multiselect”文件夹显示在“node_模块”目录中。然后在我的单个文件组件“ms.vue”文件中添加适当的引用：

<template>
    <div>
        Hello world!
        <label class="typo__label">Select with search</label>
        <multiselect v-model="value" :options="options" :custom-label="nameWithLang" placeholder="Select one" label="name" track-by="name"> 
        </multiselect>
        <pre class="language-json"><code>{{ value  }}</code></pre>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect'
    export default {
        components: {
            Multiselect
        },
        data () {
            return {
                value: { name: 'Vue.js', language: 'JavaScript' },
                options: [
                    { name: 'Vue.js', language: 'JavaScript' },
                    { name: 'Rails', language: 'Ruby' },
                    { name: 'Sinatra', language: 'Ruby' },
                    { name: 'Laravel', language: 'PHP' },
                    { name: 'Phoenix', language: 'Elixir' }
                ]
            }
        },
        methods: {
            nameWithLang ({ name, language }) {
                return `${name} — [${language}]`
            }
        }
    }
</script>

<style>
</style>

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <ms></ms>                                         
    </div>
</template>

<script>
    import ms from './components/ms.vue'
    export default {
        name: 'App',
        components: {
            ms
        }
    }
</script>

<style>
</style>

从“vue Multiselect”导入Multiselect 导出默认值{ 组成部分：{ 多选 }, 数据（）{ 返回{ 值：{name:'Vue.js'，语言：'JavaScript'}， 选项：[ {name:'Vue.js'，language:'JavaScript'}， {name:'Rails'，language:'Ruby'}， {名称：'Sinatra'，语言：'Ruby'}， {名称：'Laravel'，语言：'PHP'}， {名称：'凤凰'，语言：'长生不老药'} ] } }, 方法：{ nameWithLang（{name，language}）{ 返回`${name}-[${language}]` } } } 一切都编译得很好，但当我转到浏览器时，页面为空，控制台中出现以下错误：

runtime-core.esm-bundler.js?5c40:5435 Uncaught TypeError: selfHook.call is not a function  
  at callSyncHook (runtime-core.esm-bundler.js?5c40:5435)  
    at applyOptions (runtime-core.esm-bundler.js?5c40:5227)  
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6006)  
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:5942)  
    at setupComponent (runtime-core.esm-bundler.js?5c40:5882)  
    at mountComponent (runtime-core.esm-bundler.js?5c40:4161)  
    at processComponent (runtime-core.esm-bundler.js?5c40:4137)  
    at patch (runtime-core.esm-bundler.js?5c40:3784)  
    at mountChildren (runtime-core.esm-bundler.js?5c40:3950)  
    at mountElement (runtime-core.esm-bundler.js?5c40:3896)  

我试过使用其他组件，但得到了相同的错误

我的“App.vue”文件：

<template>
    <div>
        Hello world!
        <label class="typo__label">Select with search</label>
        <multiselect v-model="value" :options="options" :custom-label="nameWithLang" placeholder="Select one" label="name" track-by="name"> 
        </multiselect>
        <pre class="language-json"><code>{{ value  }}</code></pre>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect'
    export default {
        components: {
            Multiselect
        },
        data () {
            return {
                value: { name: 'Vue.js', language: 'JavaScript' },
                options: [
                    { name: 'Vue.js', language: 'JavaScript' },
                    { name: 'Rails', language: 'Ruby' },
                    { name: 'Sinatra', language: 'Ruby' },
                    { name: 'Laravel', language: 'PHP' },
                    { name: 'Phoenix', language: 'Elixir' }
                ]
            }
        },
        methods: {
            nameWithLang ({ name, language }) {
                return `${name} — [${language}]`
            }
        }
    }
</script>

<style>
</style>

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <ms></ms>                                         
    </div>
</template>

<script>
    import ms from './components/ms.vue'
    export default {
        name: 'App',
        components: {
            ms
        }
    }
</script>

<style>
</style>

从“./components/ms.vue”导入ms
导出默认值{
名称：“应用程序”，
组成部分：{
太太
}
}

编辑2020-09-02:
我看到的是，该问题仅出现在Vue3中。当我在Vue2中重新创建整个项目时，一切都很好。但仍然不知道问题的核心原因