vue routerを導入できない

現在既存のRailsプロジェクトにvue-routerを導入しようと試みています。
yarn add vue-routerコマンドを打ち、以下設定を行ったのですが、画面に「タイトル」の文字が表示されません。
（一度表示されたのですが、タブを開き直したらvueの部分が全く表示されなくなってしまいました。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>アプリ名</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <%= javascript_pack_tag "hello_vue" %>
  </body>
</html>

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'tops#index'
  get 'tops/index', to: 'tops#index'
end

app/javascript/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import TopIndex from "../pages/top/index.vue";

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: TopIndex,
      name: "TopIndex"
    }
  ]
})

export default router

app/javascript/packs/hello_vue.js

import Vue from 'vue'
import App from '../app.vue'
import router from '../router/index.js'

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

  console.log(app)
})

app/javascript/app.vue

<template>
  <div id="app">
    <p>{{ title }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      title: "タイトル"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
</style>

原因がわからず詰まっています。
ご教授頂ければ幸いです。よろしくお願い致します。