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

Question

我具有以下App组件：

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

脚本：

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

我有大型机组件：

HTML：

<template>
   <v-container>
     <component :is="component"></component>
   </v-container>
</template>

脚本：

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

就这么简单是行不通的。大型机组件已呈现，但动态异步组件绑定不起作用。不显示“ Hello”。如果我尝试用密码笔重现它，则效果很好。我真的不知道我做错了什么。我感谢任何建议。我的控制台没有显示任何错误，并且组件已正确注册。