title: Components which are not defined in SFC are not shown using Vue3 Router?
body: <p>Now I am trying to create a front-end of a website using Vue3. But now I am having an issue using the Router.
  Here's my code.</p>
  <p>Main.js</p>
  <pre><code>import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  
  createApp(App).use(router).mount('#app')
  </code></pre>
  <p>router/index.js</p>
  <pre><code>import {createRouter, createWebHistory} from 'vue-router'
  
  const Home = { template: '&lt;div&gt;Home&lt;/div&gt;' }
  const About = { template: '&lt;div&gt;About&lt;/div&gt;' }
  
  const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]
  
  const router = createRouter({
      history: createWebHistory(),
      routes
  });
  
  export default router;
  </code></pre>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot;&gt;
    &lt;h1&gt;Hello App!&lt;/h1&gt;
    &lt;p&gt;
      &lt;!-- use the router-link component for navigation. --&gt;
      &lt;!-- specify the link by passing the `to` prop. --&gt;
      &lt;!-- `&lt;router-link&gt;` will render an `&lt;a&gt;` tag with the correct `href` attribute --&gt;
      &lt;router-link to=&quot;/&quot;&gt;Go to Home&lt;/router-link&gt;
      &lt;router-link to=&quot;/about&quot;&gt;Go to About&lt;/router-link&gt;
    &lt;/p&gt;
    &lt;!-- route outlet --&gt;
    &lt;!-- component matched by the route will render here --&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;
  </code></pre>
  <p>There's no content in router-view after rendering. How can I fix it?</p>