< router-view/>と書くとコンポーネントの内容が重複して表示されてしまう理由

環境

vue2.6系で作成しています。
(ruby on railsのwebpacker経由でインストールしています)

問題

以下の様にshow.vue(ShowUser)からedit.vue(EditUser)にrouter-linkをクリックすると遷移させる動きをしたいのですが、特に名前をつけず<router-view/>と記載すると編集という文字が重複して表示されています。
編集というボタンを押すと遷移(描画はするのですが、片方の編集という文字は残ったままでedit.vueに遷移(描画)を行なってしまいます。
なぜこの様なことが起きるか全く理解できずにいるのですが、
vue-routerの仕組みやコンポーネントの仕組みに関して分かりかねているところがあるのでご教示いただけると幸いです。
よろしくお願いします。

####コード

// ../user_views/show.vue
<template>
  <v-app id="users">
　　こちらはサンプルコードです
   　<router-link :to="{ path: '/user_page_edit', query: { value: this.user_id }}">編集</router-link>
    <router-view/>　<!-- 該当箇所 -->
  </v-app>
</template>

<script>
//省略
</script>

//router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import ShowUser from '../user_views/show.vue'
import EditUser from '../user_views/edit.vue'


const routes =[
  { path: '/user_page/:id', component: ShowUser, name:ShowUser},
  { path: '/user_page_edit', component: EditUser, name: EditUser}
];

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

export default router;

//user.js
import Vue from 'vue'
import User from '../user_views/show.vue'
import Vuetify from "vuetify"; 
import "vuetify/dist/vuetify.min.css";
import router from "../router/router.js";
Vue.use(ElementUI, { locale })
Vue.use(Vuetify); 


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