title: How to dynamically import Vue 3 component?
body: <p>According <a href="https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/" rel="nofollow noreferrer">this article</a> I would like to import component to view dynamically to my Vue 3 app. The code of the view looks like:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;page&quot;&gt;
        &lt;latest-box v-if=&quot;showLatestBox&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  // @ is an alias to /src
  // This works well. 
  //import LatestBox from '@/components/LatestBox.vue'
  
  
  export default {
      name: 'Page 1',
  
      data() {
          return {
              showLatestBox: true,
          }
      },
  
      components: {
          LatestBox: () =&gt; import('@/components/LatestBox.vue')  // This does not work
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Code does not throw any errors but I dont see the component on the page. If I use first import style it works. Am I missing somethig?</p>