title: Vue.js - Dynamic component import in data and computed properties
body: <p>I have component 'Page' that should display a component which is retrieved via its props.</p>
  
  <p>I managed to get my component loads when I harcode my component path in my component data like this :</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div v-if="includeHeader"&gt;
        &lt;header&gt;
          &lt;fv-header/&gt;
        &lt;/header&gt;
      &lt;/div&gt;
      &lt;component :is="this.componentDisplayed" /&gt;
      &lt;div v-if="includeFooter"&gt;
        &lt;footer&gt;
          &lt;fv-complete-footer/&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Header from '@/components/Header/Header';
    import CompleteFooter from '@/components/CompleteFooter/CompleteFooter';
  
    export default {
      name: 'Page',
      props: {
        componentPath: String,
        includeHeader: Boolean,
        includeFooter: Boolean
      },
      data() {
        componentDisplayed: function () {
          const path = '@/components/my_component';
          return import(path);
        },
      },
      components: {
        'fv-header': Header,
        'fv-complete-footer': CompleteFooter,
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>But with the data I cannot refer to my props within my function as this is undefined.</p>
  
  <p>I tried to used computed properties instead of data but I have the error "src lazy?0309:5 Uncaught (in promise) Error: Cannot find module '@/components/my_component'. But the module exists! But maybe not at that time ?</p>
  
  <pre><code>computed: {
    componentDisplayed: function () {
      const path = `@/components/${this.componentPath}`;
      return import(path);
    },
  },
  </code></pre>
  
  <p>There must be away to deal with that but I am quite a beginner to vue.js :)</p>