title: How to import dynamic v-bind:is component with module system in Vue
body: <p><strong>Problem:</strong> I am trying to programmatically register a component to be used in a slot in my Vue/Nuxt site. The component name is included in the data of the parent <code>index.vue</code> file, in this instance the component is named <code>Projects</code>. I am including it in a <code>v-for</code> template as the various objects in the <code>'modules'</code> data array are iterated over. I had assumed this would be possible/easy from the <a href="https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components" rel="nofollow noreferrer">dynamic component documentation</a> and <a href="https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components" rel="nofollow noreferrer">example</a> however I have not managed to get it working in my case.</p>
  <p><strong>What I expect to happen:</strong> I expected the component to be registered and 'slotted' into the <code>Module</code> component correctly.</p>
  <p><strong>What actually happens:</strong> While I can see on the rendered view that the component is 'there', it is not in the correct place (i.e. slotted into the <code>Module</code> component). I also get a <code>vue/no-unused-components</code> error saying: <code>The &quot;Projects&quot; component has been registered but not used</code>.</p>
  <p>I have read the documentation about <a href="https://v2.vuejs.org/v2/guide/components-registration.html#Module-Systems" rel="nofollow noreferrer">component registration in modular systems</a> but these seem to be for more complex cases than what I am trying to achieve. Any advice would be really helpful as I am totally stuck!</p>
  <p><code>index.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;template v-for=&quot;module in modules&quot;&gt;
        &lt;Module
          :title=&quot;module.title&quot;
          :to=&quot;module.link&quot;
        /&gt;
        &lt;component v-bind:is=&quot;module.slot&quot; /&gt;
        &lt;/Module&gt;
      &lt;/template&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Module from '~/components/module/Module.vue'
  import Projects from '~/components/module/slots/Projects.vue'
  export default {
    components: {
      Module,
      Projects
    },
    data () {
      return {
        modules: [
          {
            title: 'Work',
            slot: 'Projects'
          },
          {
            ...
          }
        ]
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>Edit:</strong> As a side note, I get the same error when registering the component with <code>import</code> like so:</p>
  <pre><code>components: {
    Module,
    'Projects': () =&gt; import('@/components/module/slots/Projects')
  }
  </code></pre>
  <p><code>Module.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;
        {{ title }}
      &lt;/h2&gt;
      &lt;slot /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    props: {
      title: {
        type: String,
        default: ''
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p><code>Projects.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h3&gt;Projects&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: 'Projects'
  }
  &lt;/script&gt;
  </code></pre>