Vue-router not loading component on first load

Question

I am building a page with vue and vue-router , i got the routes like this

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
});

the problem, the Home component is not being mounted, why? this is the component

<template>
    <div class="row">
        <section class="home-screen" data-stellar-background-ratio="0.5">
            <div class="content d-flex">
                <div class="col s10 center-block d-flex justify-content-around flex-column">
                    <div class="">
                        <h2 class="banner-text main text-white">
                        Inicia ahora mismo esta emocionante experiencia.
                        </h2>
                        <div class="center-align">
                            <a href="#!" class="btn btn-go bg-mustard text-black waves waves-effect mb-2" alt="Crea tu sitio web o tienda virtual"><h6 class="font-montserrat mb-0">Crea tu página</h6></a>
                            <a href="#find-store" class="text-gray modal-trigger find-store"><h4 class="text-6 font-montserrat mt-0 mb-0">O haz click aquí para buscar tu tienda virtual</h4></a>
                        </div>
                        <div class="big-title-container center-align">
                            <h1 class="text-white super-big-title"><span class="la-w">W</span>ebinablink</h1>
                            <h3 class="banner-text main sub text-gray font-montserrat light title-3 mt-0">
                            Crea tu página web... ¡en un parpadeo!
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    export default {
        mounted: function() {
            console.log('hello')
        }
    }
</script>

if i add another router and use router-link the component load as it should, but not Home in the first load, how could i solve this?

My App.vue is just a nav and a footer, the component is

<template>
    <div>
        .... a navbar ....
        <div class="body z-depth-5">
            <router-view :key="$route.path" @ajaxover="ajaxOver"></router-view>
        </div>
        .... a footer ....
    </div>
</template>
<script>
    import PageLogo from '../components/PageLogo'
    import Loading from '../components/Loading'
    export default {
        mounted : function(){

        },
        components : {
            'page-logo' : PageLogo,
            'loading' : Loading
        },
        methods : {
            ajaxOver : function() {

            }
        }
    }
</script>

Answer 1

Describe template in new Vue

const app = new Vue({
    el: '#app',
    components : { App },
    router,
    template: '<app />'
});