laravel – Why vuejs link does not open new page?

In laravel 8/vuejs 2 app I added new page with route in resources/js/routes/index.js:

import ProjectsByCategory from "../components/ProjectsByCategory.vue";
...
        {
            path: "/projects_by_category/:slug",
            name: "projectsByCategory",
            component: ProjectsByCategory,
            meta: { title: "Projects By Category | " + project_name }
        },

But opening this page from homepage, I got errors:

VM174:1 GET https://accounts.google.com/o/oauth2/iframerpc?action=listSessions&client_id=82594195761XXXXXX.apps.googleusercontent.com&origin=http%3A%2F%2F127.0.0.1%3A8000&scope=openid%20profile%20email&ss_domain=http%3A%2F%2F127.0.0.1%3A8000 400
(anonymous) @ VM174:1
Ch @ 2679044947-idpiframe.js:172
Ih @ 2679044947-idpiframe.js:173
(anonymous) @ 2679044947-idpiframe.js:206
(anonymous) @ 2679044947-idpiframe.js:183
(anonymous) @ 2679044947-idpiframe.js:180
m.getItem @ 2679044947-idpiframe.js:157
W.J @ 2679044947-idpiframe.js:180
Sh.J @ 2679044947-idpiframe.js:183
li @ 2679044947-idpiframe.js:196
m.Kf @ 2679044947-idpiframe.js:206
(anonymous) @ 2679044947-idpiframe.js:211
Vh.Vf @ 2679044947-idpiframe.js:188
b @ 2679044947-idpiframe.js:199
app.js?v=1626412531:131396 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at Object.removeChild (http://127.0.0.1:8000/js/app.js?v=1626412531:131396:8)
    at removeNode (http://127.0.0.1:8000/js/app.js?v=1626412531:131567:15)
    at remove$$1 (http://127.0.0.1:8000/js/app.js?v=1626412531:131556:9)
    at http://127.0.0.1:8000/js/app.js?v=1626412531:134015:7
    at http://127.0.0.1:8000/js/app.js?v=1626412531:125984:10
    at whenTransitionEnds (http://127.0.0.1:8000/js/app.js?v=1626412531:133711:23)
    at http://127.0.0.1:8000/js/app.js?v=1626412531:134048:15
    

and new page is not opened, as I expected, but homepage is still opened navigating to top of the page.
In resources/js/components/ProjectsByCategory.vue I have :

<template>
  <div>
    <Header/>

    <!-- Titlebar -->
    <div class="single-page-header">
      <div class="container">

      resources/js/components/ProjectsByCategory.vue

      </div>
    </div>

    <Footer/>

  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";

export default {
  name: "ProjectsByCategory",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
       ...
    };
  },
  created() {
    console.log('this.$route::')
    console.log(this.$route)

    document.title = this.$route.meta.title;
  },
};
</script>

Actaully before that I worked only in adminarea(without vuejs) and homepage.
Is something wrong in my vuejs part and what have I to check ?

In composer.json:
“laravel/framework”: “^8.12”,

in package.json :

"devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^4.6.0",
    "jquery": "^3.4.1",
    "laravel-mix": "^6.0.25",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "postcss": "^8.3.1",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "bootstrap-vue": "^2.21.2",
    "ckeditor4-vue": "^1.3.0",
    ...

    

Thanks!