vueのコンポーネントが何故か重複して表示される

環境

vue.js
vue-router

問題

具体的な現象としてはvue-routerにルートのコンポーネントをルートパスとして設定すると、
ルートのコンポーネントに記載されているテンプレートが重複表示されてしまうというものです。
まずvue-routerで以下の様にパスを設定します。

// router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import Signup from '../entries_views/sign_up.vue'
import Signin from '../entries_views/sign_in.vue'
import Home from '../layouts_views/home.vue'


const routes =[
  { path: '/', component: Home },//ここを記載すると重複表示される
  { path: '/sign_in', component: Signin },
  { path: '/sign_up', component: Signup },
];

const router = new VueRouter({
  routes,
  base: process.env.BASE_URL,
});

export default router;

ここのcomponent:Homeはルートコンポーネントで以下の様にインスタンス化しております。

//home.js
import Vue from 'vue'
import router from "../router/router.js"
import Home from '../layouts_views/home.vue'

document.addEventListener('DOMContentLoaded', () => {
    const home = new Vue({
      router,
      render: h => h(Home)
    }).$mount()
    document.body.appendChild(home.$el)
})

またrouter.jsとhome.jsで読み込んでいるコンポーネントHomeは以下の様に記載しており、
Headerという部分テンプレートを読み込んでいます。
HeaderはTopページ、ログイン、登録ページとrouter-linkで切り替えられるページ内容です。

//Home.vue
<template>
    <div id="home">
      <Header/>
      <main class="container mt-4">
        <router-view></router-view>
      </main>
    </div>
</template>

<script>
import Header from './header'
export default {
  name: "home",
  data: function() {        
    return{
    }
  },
  components: {　
        Header
    },
}
</script>

//Header.vue
<template>
    <div id="header">
      <v-app-bar color="deep-purple accent-4" dense dark>
        <v-toolbar-title>APP</v-toolbar-title>
        <v-spacer></v-spacer>
        <div v-if = "is_login === false">
            <router-link to="/" class="nav-link">Top</router-link>
            <router-link to="/sign_in" class="nav-link">ログイン</router-link>
            <router-link to="/sign_up" class="nav-link">登録</router-link>
        </div>
        <div v-else-if = "is_login === true">
            <button v-on:click="sign_out" >ログアウト</button>
        </div>
      </v-app-bar>
    </div>
</template>

<script>
import axios from 'axios';
import SignIn from '../entries_views/sign_in'
import SignUp from '../entries_views/sign_up'
export default {
  name: "header",
  data: function() {        
    return{
　　　　　　　　　　　is_login: null,
    }
  },
  components: {　
        SignIn,
        SignUp
    },
  mounted() {
//省略
  },
  watch: {
//省略
  },
    methods: {
//省略
  }
}
</script>

しかし以上の様に書くと添付画像の様にHeaderが重複して出てきてしまいます。(見えづらいですが右端にログインの導線があります)

何故この様な現象が起きてしまうのでしょうか？
なんとなくルートコンポーネントをルートパスにするとrourer-viewが悪さをする様な気がするのですが、原因がいまいち分かりません。
ご回答いただけると幸いです。