title: Laravel Mix Vue, Lazy loading component returns error as unknown custom element when using Vue Router
body: <p>I have got a fresh install of Laravel Mix and I am trying to setup lazy loading components in the project. I have got the correct setup with the babel plugin 'syntax-dynamic-import' so the import statement in app.js works as expected. The issue occurs when I attempt to use the lazy loaded component with vue-router.</p>
  
  <p>My app.js file looks like this:</p>
  
  <pre><code>require('./bootstrap');
  
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  
  Vue.use(VueRouter);
  
  const EC = () =&gt; import(/* webpackChunkName: "example-component" */ './components/ExampleComponent.vue');
  
  const router = new VueRouter({
      mode: 'history',
      routes: [
          { path: '/', component: EC }
      ]
  });
  
  const app = new Vue({
      router,
      el: '#app'
  });
  </code></pre>
  
  <p>and my welcome.blade.php file looks like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="{{ app()-&gt;getLocale() }}"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  
      &lt;title&gt;Laravel&lt;/title&gt;
  
      &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
  
      &lt;base href="/" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;
      &lt;h1&gt;Base title&lt;/h1&gt;
      &lt;example-component&gt;&lt;/example-component&gt;
  &lt;/div&gt;
  
  &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So I just trying to land on the root route and display the Example Component. The example component is included in the welcome.blade.php file.</p>
  
  <p>I am receiving this error in the console:</p>
  
  <pre><code>[Vue warn]: Unknown custom element: &lt;example-component&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
  (found in &lt;Root&gt;)
  </code></pre>
  
  <p>I think I am missing something simple, any advice is appreciated.</p>