Vue Routerが反映されません

Question

質問内容

Vue Routerが反映されず躓いてます。

実現したいこと

・Home.vue反映
・ページタイトル反映

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

Consoleでは２つの警告が発生しています。

[Vue warn]: Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

app.js:7159 [Vue warn]: Property "user" was accessed during render but is not defined on instance. 
  at <Navbar> 
  at <App>

該当のソースコード

import "./assets/tailwind.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

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

<script setup>
import Navbar from "./components/Navbar.vue";
import Footer from "./components/Footer.vue";
</script>

<template>
  <div class="flex flex-col bg-gray-100 min-h-screen">
    <Navbar />
    <div class="flex-grow">
      <router-view />
    </div>
    <Footer />
  </div>
</template>

import * as vueRouter from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    component: Home,
    meta: {
      title: "Home",
    },
  },
];

const router = vueRouter.createRouter({
  history: vueRouter.createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title}|MyBlog`;
  next();
});

export default router;

<template>
  <p>Home</p>
</template>

試したこと

いくつかの記事で下記方法で解決できるとありますが、当該コードはその通りに記述されています。
https://vueshowcase.com/question/failed-to-resolve-component-router-view-vuerouter

import { router } from "./router"; // ❌

import router from "./router"; // 👍

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

1. 当該コードのNavbar.vueとFooter.vueは問題なく表示されてます

   ...
    "dependencies": {
        "vue": "^3.2.36",
        "vue-router": "^4.0.16"
    }

Answer 1

すみません。自己解決できました。
use(router)すべきjsファイルが誤っているという単純ミスでした。。