Can't use router-link inside Component - vue.js

Question

Ok so I started a basic VueJS with the VueCli.
This is my setup:
App.vue
<template>
<div id="app">
<router-link to="/home"><span>Home</span></router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Home.vue
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'HomeView'
}
}
}
</script>
index.js from the router:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/pages/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
}
]
})
main.js:
import Vue from 'vue'
import App from './App'
import NavigationBar from './components/NavigationBar'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
})
new Vue({
el: '#navigation-bar',
template: '<NavigationBar/>',
components: {NavigationBar}
})
This works perfectly fine. The routerlink works and display the Home.vue.
However I created a NavigationBar Component:
NavigationBar.vue
<template>
<div><span>Test</span>
<router-link to="/home"><span>Home</span></router-link></div>
</template>
<script>
export default {
name: 'navigationBar',
data () {
return {
}
}
}
</script>
When I now delete the router-link in the App.vue and add the navigation-bar ID I cant see the router-link. But the NavigationBar gets loaded, because I see the Test Span:
App.vue
<template>
<div id="app">
<div id="navigation-bar"></div>
<router-view></router-view>
</div>
</template>
Why doesnt it work? The router-link is just inside a template and I get no error message.