vue.jsでルーティング設定した画面に遷移させたいのですがUncaught TypeError: undefined is not a functionというエラーがでて解決できません。

Question

前提

現在railsでポートフォリオを作成中で、deviseとvue.jsでルーティングを設定しています。

実現したいこと

vueで設定したルーティングで画面遷移したい。

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

エラーメッセージ
vue-router.mjs:2042 Uncaught TypeError: undefined is not a function
    at ./node_modules/vue-router/dist/vue-router.mjs (vue-router.mjs:2042:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/packs/router.js (router.js:2:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

### 該当のソースコード

router.js
import { createRouter, createWebHistory} from 'vue-router'
import UsersNewPage from "../pages/UsersNewPage"

Vue.use(Router)

const routes = [
  { path: '/', component: Index },
  { path: '/users/sign_up', component: UsersNewPage },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})



application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import { createApp } from 'vue'
import App from '../app.vue'
import { router } from'./router.js'

require('./graph')

Rails.start()
Turbolinks.start()
ActiveStorage.start()

const app = createApp(App);
app.use(router);
app.mount('#app');


git
https://github.com/rai-prs/Craftsman/tree/develop

### 試したこと
vue3,vue-router4でバージョンによって書き方が違うのが原因だと思い、色んなサイトを参考に試したのですが解決できませんでした。
原因がわかる方いましたら回答よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

Answer 1

router.jsをこんな感じに変更してみたらどうでしょうか。

import { createRouter, createWebHistory} from 'vue-router'
import UsersNewPage from "../pages/UsersNewPage.vue"
import Index from "../pages/Index.vue"

const routes = [
  { path: '/', component: Index },
  { path: '/users/sign_up', component: UsersNewPage },
]
export const  router = createRouter({
  history: createWebHistory(),
  routes,
})

Answer 2

vueのバージョンを下げることで解決しました。