How to add route from component in VUE 3 vue-router v.4?

Question

Vue.js

Good afternoon!

There is a PDFTools component that displays menu items for jumping to a specific tool.
the router is initialized in the standard way:

import { createRouter, createWebHistory } from 'vue-router'
//...

const routes = [
  {
    path: '/',
    component: Index,
  },
  {
    name: 'PDFTools',
    path: '/pdftools',
    component: pdfTools,
  },
...
 {
    name: 'PDFMerge',
    path: '/pdftools/merge',
    component: PDFMerge,
  },
  {
    path: '/pdftools/remove',
    name: 'PDFRemove',
    component: PDFRemove,
  },
  { path: '/:path(.*)', component: NotFound },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

There are no problems here, it goes from menu items to tools without problems.

In order not to pile up routes in this file, I want to transfer (and others):

{
    name: 'PDFMerge',
    path: '/pdftools/merge',
    component: PDFMerge,
  },
  {
    path: '/pdftools/remove',
    name: 'PDFRemove',
    component: PDFRemove,
  },

in the PDFTools.vue component

<script type="ts">
import { defineComponent } from "vue"
import {useRouter, useRoute} from "vue-router"

// здесь лежит массив с маршрутами export const PDFToolsMenu: RouteRecordRaw[] =
import { PDFToolsMenu } from "@/pages/pdfTools/config" 

const pdfTools = defineComponent ({
  name: 'PDFTools',
  setup(){
    const menu = PDFToolsMenu
    const router = useRouter()
      PDFToolsMenu.map((route) => {
        router.addRoute(route)
      })
      console.log(router.getRoutes())
    })
...

the output to the console shows the presence of new routes.

0: {path: "/about/", redirect: undefined, name: undefined, meta: {…}, aliasOf: undefined, …}
1: {path: "/pdftools/merge", redirect: undefined, name: "PDFMerge", meta: {…}, aliasOf: undefined, …}
2: {path: "/pdftools/remove", redirect: undefined, name: "PDFRemove", meta: {…}, aliasOf: undefined, …}
3: {path: "/pdftools/split", redirect: undefined, name: "PDFSplit", meta: {…}, aliasOf: undefined, …}
4: {path: "/pdftools/convert", redirect: undefined, name: "PDFConvert", meta: {…}, aliasOf: undefined, …}
5: {path: "/pdftools/compress", redirect: undefined, name: "PDFCompress", meta: {…}, aliasOf: undefined, …}
6: {path: "/", redirect: undefined, name: undefined, meta: {…}, aliasOf: undefined, …}
7: {path: "/viewer", redirect: undefined, name: "PDFViewer", meta: {…}, aliasOf: undefined, …}
8: {path: "/pdftools", redirect: undefined, name: "PDFTools", meta: {…}, aliasOf: undefined, …}
9: {path: "/:path(.*)", redirect: undefined, name: undefined, meta: {…}, aliasOf: undefined, …}

if you look in vue devtools in the Routes tab, there are also routes,
but if you try to follow the link, it goes along the path
{ path: '/:path(.*)', component: NotFound },

I can't understand why. As if the router is working with the old list of routes and does not pay attention to the ones added later ...