Почему не рендерятся router-link элементы

У меня есть файл app.vue

<template>
    <h1>Hello App!</h1>
    <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
</template>
<script>
    import VueRouter from "vue-router";
    export default {
        name: 'app'
    }
</script>

И запускаемый файл main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
Vue.use(VueRouter);
const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}
const routes = [
    {path: '/foo', component: Foo},
    {path: '/bar', component: Bar}
]
const router = new VueRouter({
    routes // сокращение от `routes: routes`
})
const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

Приложение рендерится, ошибок не выводит, но ссылок router-link нету. Не могу понять в чём дело.

Для сборки использую rollup, не знаю имеет ли это значение.

Я во Vue.js новичок, хочу понять как сделать проект с .vue файлами, роутингом, и основным шаблоном.

Решилось добавлением div

<template>
    <div> /* добавил */
        <h1>Hello App!</h1>
        <p>
            <!-- используйте компонент router-link для создания ссылок -->
            <!-- входной параметр `to` определяет путь для перехода -->
            <!-- `<router-link>` по умолчанию преобразуется в тег `<a>` -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- отображение компонента, для которого совпал путь -->
        <router-view/>
    </div>
</template>

Но зачем этот div нужен, не понимаю?