vue.js 组件缺少模板或渲染功能

在Vue 3中，我创建了以下Home个组件，另外两个组件(Foo和Bar)，并将其传递给vue-router，如下所示.Home组件是使用Vue的component函数创建的，而Foo和Bar组件是使用普通对象创建的.

我得到的错误是:

Component is missing template or render function.

在这里，Home部件导致了问题.我们不能将component()的结果传递给vue-router的路由对象吗？

<div id="app">
   <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/foo">Foo</router-link></li>
      <li><router-link to="/bar">Bar</router-link></li>
   </ul>
   <home></home>
   <router-view></router-view>
</div>

<script>
   const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
   const { createApp } = Vue
   const app = createApp({})

   var Home = app.component('home', {
      template: '<div>home</div>',
   })

   const Foo = { template: '<div>foo</div>' }
   const Bar = { template: '<div>bar</div>' }

   const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
      ],
    })

    app.use(router)

    app.mount('#app')
</script>

参见codesandbox中的问题.