title: Vue-router not loading component on first load
body: <p>I am building a page with <code>vue</code> and <code>vue-router</code>, i got the routes like this</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  
  import App from './views/App'
  import Home from './views/Home'
  const router = new VueRouter({
      mode: 'history',
      routes: [
          {
              path: '/',
              name: 'home',
              component: Home
          }
      ],
  });
  const app = new Vue({
      el: '#app',
      components : { App },
      router
  });
  </code></pre>
  
  <p>the problem, the <code>Home</code> component is not being mounted, why? this is the component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row"&gt;
          &lt;section class="home-screen" data-stellar-background-ratio="0.5"&gt;
              &lt;div class="content d-flex"&gt;
                  &lt;div class="col s10 center-block d-flex justify-content-around flex-column"&gt;
                      &lt;div class=""&gt;
                          &lt;h2 class="banner-text main text-white"&gt;
                          Inicia ahora mismo esta emocionante experiencia.
                          &lt;/h2&gt;
                          &lt;div class="center-align"&gt;
                              &lt;a href="#!" class="btn btn-go bg-mustard text-black waves waves-effect mb-2" alt="Crea tu sitio web o tienda virtual"&gt;&lt;h6 class="font-montserrat mb-0"&gt;Crea tu página&lt;/h6&gt;&lt;/a&gt;
                              &lt;a href="#find-store" class="text-gray modal-trigger find-store"&gt;&lt;h4 class="text-6 font-montserrat mt-0 mb-0"&gt;O haz click aquí para buscar tu tienda virtual&lt;/h4&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="big-title-container center-align"&gt;
                              &lt;h1 class="text-white super-big-title"&gt;&lt;span class="la-w"&gt;W&lt;/span&gt;ebinablink&lt;/h1&gt;
                              &lt;h3 class="banner-text main sub text-gray font-montserrat light title-3 mt-0"&gt;
                              Crea tu página web... ¡en un parpadeo!
                              &lt;/h3&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          mounted: function() {
              console.log('hello')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>if i add another router and use <code>router-link</code> the component load as it should, but not <code>Home</code> in the first load, how could i solve this?</p>
  
  <p>My <code>App.vue</code> is just a nav and a footer, the component is</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          .... a navbar ....
          &lt;div class="body z-depth-5"&gt;
              &lt;router-view :key="$route.path" @ajaxover="ajaxOver"&gt;&lt;/router-view&gt;
          &lt;/div&gt;
          .... a footer ....
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import PageLogo from '../components/PageLogo'
      import Loading from '../components/Loading'
      export default {
          mounted : function(){
  
          },
          components : {
              'page-logo' : PageLogo,
              'loading' : Loading
          },
          methods : {
              ajaxOver : function() {
  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>