Vue.js Vuejs动态异步组件未加载

我有以下应用程序组件：

HTML:

<template>
   <div id="app">
      <v-app>
        <v-content>
          <template v-if="!authenticated">
            <login @loginSuccess="authenticated = true"></login>
          </template>
          <template v-if="authenticated">
            <mainframe @logout="authenticated = false"></mainframe>
          </template>
       </v-content>
     </v-app>
   </div>
</template

我有我的大型机组件：

HTML:

脚本：

import Login from './components/Login'
import Mainframe from './components/Mainframe'
export default{
    name: 'app',
    components: {
        Publiccontainer,
        Login,
        Mainframe,
    },
    data () {
        return {
            authenticated: false
        }
    }
}

export default{
    data: () => ({
        selected: `<h1>Hello</h1>`,
    }),
    computed: {
        component() {
            return {
                template: this.selected
            };
        }
    }
}

导出默认值{
数据：（）=>({
已选择：`Hello`，
}),
计算：{
组件（）{
返回{
模板：已选择此项
};
}
}
}

---

虽然很简单，但它不起作用。已呈现大型机组件，但动态异步组件绑定不起作用。不会显示“Hello”。如果我试着用代码笔复制它，效果很好。我真的不知道我做错了什么。我感谢你的建议。“我的控制台”没有显示任何错误，组件注册正确。

请检查大小写。当您在JS中声明名称时，它们是大写的（大型机，登录名），而在HTML中它们是小写的（大型机，登录名）。看看改变它是否会有帮助。你能把代码笔贴在你能正常工作的地方吗？

export default{
    data: () => ({
        selected: `<h1>Hello</h1>`,
    }),
    computed: {
        component() {
            return {
                template: this.selected
            };
        }
    }
}