VueにおいてのVueRouterでの<router-view>を用いた場合に二重に表示される件について

前提・実現したいこと

Vue.jsを使って様々な言語の単語を表示するサイトを作っています。
VueRouterで完全にハマってしまいました。

発生している問題・エラーメッセージ

最初に"/"の状態から別のページを表示しようとすると、ページが二重に表示されてしまいます。

該当のソースコード

JavaScript
1import Vue from 'vue'
2import VueRouter from 'vue-router'
3
4// ルート用のコンポーネントを読み込む
5import Home from './view/home.vue'
6import Subject from './view/subject.vue'
7
8//import NotFound from '@/pages/404.vue'
9
10// Vuexと同様で最初にプラグインとして登録
11Vue.use(VueRouter)
12
13// VueRouterインスタンスを生成する
14const router = new VueRouter({
15
16  // URLのパスと紐づくコンポーネントをマッピング
17  mode: 'history',
18  routes: [
19    {
20      path: '/',
21      component:Home
22    },
23    {
24      path: '/home',
25      component:Home
26    },
27    {
28      path: '/subject',
29      component:Subject
30    }
31  ]
32})

Vue
1<template>
2  <div>
3
4    <router-view id="here" />
5    
6
7    <div class="body">
8
9      <HeaderItem />
10      
11      <br>
12      <br>
13
14      <div class="wrapper">
15        <section class="main">
16        </section>
17
18        <SideItem class="side" />
19        
20      </div>
21
22      <br>
23      <br>
24      <br>
25      <br>
26      <br>
27      <br>
28
29      <FooterItem />
30
31    </div>
32    
33  </div>
34</template>
35
36
37<style scoped>
38.wrapper {
39  width: 95%;
40  display: flex;
41  margin: 20px auto;
42  justify-content: center;
43}
44
45.main, .side {
46  padding: 20px;
47}
48
49.main {
50  background-color:#F2EBDC;
51  width: 75%;
52  margin-right: 20px;
53}
54
55.side {
56  background-color:#F2EBDC;
57  width: 25%;
58}
59
60.side p, .side ul {
61  background-color: #f0f0f0;
62  padding: 10px 5px 10px 30px;
63}
64
65
66.body {
67	background-color:#8EB1BF;
68}
69</style>
70
71
72<script>
73import HeaderItem from './header.vue'
74import FooterItem from './footer.vue'
75import SideItem from './side.vue'
76
77export default {
78
79  name: 'home',
80  components : {
81    HeaderItem,
82    FooterItem,
83    SideItem
84  },
85
86  data: function() {
87    return {
88    }
89  }
90}
91</script>

Vue
1<template>
2  <section class="side">
3    <h5>サイドコンテンツ</h5>
4    <p>内容</p>
5    <h5>単語一覧</h5>
6    <ul>
7      <router-link to="/subject"><li>主語 / Subject</li></router-link>
8      <router-link to="/"><li>動詞 / Verb</li></router-link>
9      <router-link to="/"><li>形容詞 / Adjective</li></router-link>
10      <router-link to="/"><li>名詞 / Noun</li></router-link>
11      <router-link to="/"><li>副詞 / Adverb</li></router-link>
12      <router-link to="/"><li>疑問詞 / Interrogative</li></router-link>
13      <router-link to="/"><li>接続詞 / Conjunction</li></router-link>
14      <router-link to="/"><li>前置詞 / Preposition</li></router-link>
15      <router-link to="/"><li>時と場所 / Time and Place</li></router-link>
16      <router-link to="/"><li>挨拶 / Greeting</li></router-link>
17      <router-link to="/"><li>返事と相槌 / Reply and Nod</li></router-link>
18    </ul>
19  </section>
20</template>
21
22
23<style scoped>
24.side {
25  background-color:#F2EBDC;
26  width: 100%;
27}
28
29.side p, .side ul {
30  background-color: #f0f0f0;
31  padding: 10px 5px 10px 30px;
32}
33</style>
34
35
36<script>
37export default {
38
39  data: function() {
40    return {
41    }
42  }
43}
44</script>

試したこと

<router-view>の記述はもちろんのこと、<router-view>を使用しないで遷移をする方法も探してみましたがダメでした。

補足情報（FW/ツールのバージョンなど）

"bootstrap-vue": "^2.15.0",
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@vue/cli": "^4.4.1",
"vue": "^2.6.11",
"vue-router": "^3.3.4",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"