title: How to add dynamic/async/lazy components in VueJs
body: <p>I want to add child components in parent components on the fly based on some conditions.
  I have come up with following pseudo-code</p>
  <pre><code>If currentView == 'a'
      load component A1
      load component A2
  ElseIf currentView == 'b'
      load component B2
      load component B3
  </code></pre>
  <p>I know we can register all components in parent component like:</p>
  <pre><code>Vue.component('a1-component', require('./A1Component.vue'));
  Vue.component('a2-component', require('./A2Component.vue'));
  </code></pre>
  <p>But I have a lot of such child components and I need to load only the required components when needed. So loading all components initially is an overhead.</p>
  <p>I have tried <a href="https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components" rel="nofollow noreferrer"><strong>Dynamic components</strong></a> and <a href="https://v2.vuejs.org/v2/guide/components.html#Async-Components" rel="nofollow noreferrer"><strong>async-components</strong></a> in Vue Js. All Dynamic components are loaded altogether so its not what I want. I am not sure how Async components can be utilized to achieve this.</p>
  <p>I am using Laravel 5.4, VueJs 2.3.3 and Webpack.</p>