title: Vue.js Failed to mount component: template or render function not defined
body: <p>I'm learning to use Vue.js with Laravel from this <a href="https://www.youtube.com/watch?v=Gx93Bz62AII" rel="noreferrer">series</a> the narrator doesn't get any error but I've encountered the following error while I click to change the route.</p>
  
  <blockquote>
    <p>[Vue warn]: Failed to mount component: template or render function not defined.</p>
  </blockquote>
  
  <p>Below code is from my <code>app.js</code>:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>require('./bootstrap');
  
  window.Vue = require('vue');
  
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  
  let routes = [{
      path: '/dashboard',
      component: require('./components/Dashboard.vue')
    },
    {
      path: '/profile',
      component: require('./components/Profile.vue')
    }
  ]
  
  const router = new VueRouter({
    routes
  })
  
  Vue.component('example-component', require('./components/ExampleComponent.vue'));
  
  const app = new Vue({
    el: '#app',
    router
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Code snippet from my <code>Dashboard.vue</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Dashboard Component&lt;/div&gt;
  
                      &lt;div class="card-body"&gt;
                          I'm an example component.
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      mounted() {
        console.log('Component mounted.')
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Code snippet from my <code>master.blade.php</code> layout:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//sidebar
  &lt;ul&gt;
    &lt;li&gt;
      &lt;router-link to="/dashboard" class="nav-link"&gt;Dashboard&lt;/li&gt;
    &lt;li&gt;
      &lt;router-link to="/profile" class="nav-link"&gt;Profile&lt;/li&gt;
  &lt;/ul&gt;
  //content
  &lt;div class="container-fluid"&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm running app at <code>localhost:3000</code>with <code>browserSync</code> and <code>npm run watch</code>. Does it has anything to do with error ?</p>