RailsにVue.jsのコンポーネントを部分的に導入したが、ページ遷移した際にjavasript_pack

困っていること

Rails(apiではない)のviewにVue.jsのコンポーネントを一部分導入しました。
Vue導入前は部分テンプレート_header.html.erbを作成し
view/layout/application.html.erbに

ruby.
1<body>
2 <%= render "shared/header" %>
3 <%= yield %>
4</body>

とし、ヘッダーはそのまま表示し続け、yieldで中身を変えていました。
今回ヘッダーのみVueでコンポーネントを作成してみたのですが、ページ遷移するとyieldは正常に切り替わるのですが、ヘッダーのコンポーネントは表示されず消えてしまいます。
また、その遷移先で更新ボタンを押すと再びヘッダーが表示されます。
yieldを切り替えた際headerを表示し続ける、あるいは読み込み直しをするにはどう記述すればいいのでしょうか。

各記述

view/layout/application.html.erb

ruby.
1<!DOCTYPE html>
2<html>
3  <head>
4    <%= csrf_meta_tags %>
5    <%= csp_meta_tag %>
6    <%= javascript_pack_tag 'user_header', 'data-turbolinks-track': 'reload' %>
7  </head>
8
9  <body>
10    <navbar></navbar>
11      <%= yield %>
12  </body>
13</html>

javascript/packs/user_header.js

javascript.
1import Vue from 'vue'
2import Header from './components/header.vue'
3import vuetify from './vty'
4
5document.addEventListener('DOMContentLoaded', () => {
6  const app = new Vue({    
7    vuetify,
8    components: {
9      'navbar': Header
10    },
11    render: h => h(Header),
12  }).$mount('#app')
13
14  console.log(app)
15})

javascript/packs/vty.js(vuetify導入用)

javascript.
1import Vue from 'vue'
2import Vuetify from 'vuetify'
3import "vuetify/dist/vuetify.min.css"
4
5Vue.use(Vuetify)
6
7export default new Vuetify({
8        
9})

javascript/packs/components/header.vue

javascript.
1<template>
2  <div id="app">
3    <header>
4      <h1>
5        <a href="/">Home</a>
6      </h1>
7      <nav>
8        <ul>
9          <v-btn href="/account" text color="primary" dark large>アカウント</v-btn>
10          <v-btn href="/session" text data-method="delete" color="primary" dark large>ログアウト</v-btn>
11        </ul>
12      </nav>
13    </header>
14  </div>
15</template>
16
17<script>
18</script>
19
20<style>
21header {
22    width: 100%;
23    padding: 10px 4% 10px;
24    background-color: #2196F3;
25    position: fixed;
26    top: 0;
27    display: flex;
28    align-items: center;
29  }
30h1
31  {
32    margin: 0; padding: 0;
33    font-size: 20px;
34  }
35a {
36  text-decoration: none;
37  color: #ffffff;
38  }
39ul {
40  list-style: none;
41  margin: 0;
42  display: flex;
43}
44li {
45  margin: 0 0 0 15px;
46  font-size: 14px;
47}
48nav {
49  margin: 0 0 0 auto;
50  }
51</style>