【Rails + Vue】vue-routerでコンポーネントが表示されない

app.vueのヘッダーは表示されるんですが、vue-routerを使用している部分<router-view>の部分がが表示されません。
また、エラー等はでておらずURLも正しく変わってます。
どなたかこの現象の原因をご教授いただけないでしょうか？

vue
1// app.vue
2<template>
3  <div>
4    <m-header>ToDoApp</m-header>
5    <router-link to="/">top</router-link>
6    <v-container>
7      <router-view></router-view>
8    </v-container>
9  </div>
10</template>
11
12<script>
13import Header from "./packs/components/molecules/header.vue";
14export default {
15  components: {
16    "m-header": Header
17  }
18};
19</script>

javascript
1// router.js
2import VueRouter from "vue-router";
3import Vue from "vue";
4import TodoIndex from "./components/pages/todo/index.vue";
5
6Vue.use(VueRouter);
7
8const router = [{ path: "/", component: TodoIndex }];
9
10export default new VueRouter({
11  mode: "history",
12  router
13});

vue
1// index.vue
2<template>
3  <v-app>
4    <v-card>
5      <v-list rounded>
6        <v-list-item-group>
7          <v-list-item>
8            <v-checkbox></v-checkbox>
9            <v-list-item-content>todo</v-list-item-content>
10          </v-list-item>
11        </v-list-item-group>
12      </v-list>
13    </v-card>
14  </v-app>
15</template>
16
17<script>
18import Vuetify from "vuetify";
19import "vuetify/dist/vuetify.min.css";
20export default {
21  vuetify: new Vuetify()
22};
23</script>