Not display vue page in Laravel project

using vue.js in Laravel. but when I route my vue page it is not showing vue page content as well. welcome.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Full Stack Blog</title>
    </head>
    <body>
          <div id="app">
             <mainapp></mainapp>
          </div>
    <script src="{{mix('/js/app.js')}}"></script> 
    </body>
</html>

mainapp.vue

<template>
    <div>
        <h1>Menu</h1>
        <router-view></router-view>
    </div>
</template>

router.js

import firstPage from './components/pages/myFirstVuePage.vue';
import newRoutePage from './components/pages/newRoutePage.vue';
import { createRouter, createWebHistory } from "vue-router";

const ROUTES = {
  MyNewVueRoute: {
    path: '/my-new-vue-route',
    name: 'MyNewVueRoute',
    component: firstPage
  },
  NewRoutePage: {
    path: '/new-route-page',
    name: 'NewRoutePage',
    component: newRoutePage
  }
}
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // feel free to add more routes here (yeah, and your root '/' route too :) )
    {
      path: ROUTES.MyNewVueRoute.path,
      name: ROUTES.MyNewVueRoute.name,
      component: ROUTES.MyNewVueRoute.component

    },
    {
      path: ROUTES.NewRoutePage.path,
      name: ROUTES.NewRoutePage.name,
      component: ROUTES.NewRoutePage.component
    },
  ]
});

export default router;

app.js

require('./bootstrap');
import { createApp } from 'vue';

window.Vue = require('vue')
import router from './router'

Vue.component('mainapp', require('./components/mainapp.vue').dafault)
const app = new Vue({
    el: '#app',
    router
    //store
})

how could I fix this problem?