Why link in inertiajs/vuejs is not reactive?

In laravel8/vuejs3/ziggy 2 app I have a link to user's profile inside of my resources/js/Layouts/AppLayout.vue:

    <template v-if="$page.props.user">
        <span class="capitalize">Welcome,</span>
        <span class="ml-1">
            <a :href="route('profile.index') ">
            {{ $page.props.user.first_name }} {{ $page.props.user.last_name }}
            </a>
        </span>
    </template>

But when I click on this page all page is reloaded(I see it by icon near with browser's url input). I expected it is an reactive link. In routes/web.php I have :

Route::middleware([ 'auth' ,'verified'])->prefix('profile')->group(function() {

    Route::get('index', [ProfileController::class, 'index'])->name('profile.index');

and I see in output of php artisan route:list  :

| Illuminate\Auth\Middleware\EnsureEmailIsVerified |
        | GET|HEAD      | profile/index                               | profile.index                  | App\Http\Controllers\Profile\ProfileController@index                  

in resources/js/frontend_app.js :

require('./bootstrap');

console.log('frontend_app.js::')

import { InertiaProgress } from '@inertiajs/progress';


import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel 0987';

import route from "ziggy";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .component('inertia-link', Link)

            .mount(el)
    },
})

InertiaProgress.init({ color: '#4B5563' });

Which way is correct and which methods have I to use?

Thanks!

"require": {
    "php": "^7.3|^8.0",
    "fideloper/proxy": "^4.2",
    "fruitcake/laravel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "inertiajs/inertia-laravel": "^0.4.5",
    "jenssegers/date": "^4.0",
    "laravel/fortify": "^1.8",
    "laravel/framework": "^8.0",
    "laravel/telescope": "^4.6",
    "laravel/tinker": "^2.0",
    "mews/purifier": "^3.3",
    "proengsoft/laravel-jsvalidation": "^4.5.1",
    "spatie/laravel-medialibrary": "^9.9",
    "spatie/laravel-permission": "^5.4",
    "tightenco/ziggy": "^1.4",
    "laravel/jetstream": "^2.4",
    "wboyz/laravel-enum": "^0.2.1"

MODIFIED BLOCK :

I failed to import route method : I had to move to vuejs2, as I had some problems with some components work in vuejs3.

In resources/js/frontend_app.js I have now :

import Vue from 'vue'
import axios from 'axios'
axios.defaults.crossDomain = true

import 'font-awesome/css/font-awesome.css'

Vue.config.productionTip = false
Window.axios = axios

import { createInertiaApp } from '@inertiajs/inertia-vue'

import route from "ziggy";

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        new Vue({
            render: h => h(App, props),
        }).$mount(el)
            .use(route)

    },
})

also I tried to set import in my AppLayout.vue file :

    <template >
        <Link :href="$route('profile.index')">222Profile</Link>
    </template>
    ...


import route from 'ziggy';
export default {
    components: {
        route
        ...
    },

But I got error :

[Vue warn]: Property or method "route" is not defined on the instance but referenced during render.

How can it be fixed ?

Also in webpack.mix.js I have : mix.webpackConfig({ resolve: { alias: { ziggy: path.resolve('vendor/tightenco/ziggy/dist'), '@Layouts': path.resolve(__dirname, 'resources/js/Layouts') }, }, });

MODIFIED BLOCK 2: In webpack.mix.js I modified alias :

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
            '@Layouts': path.resolve(__dirname, 'resources/js/Layouts')
        },
    },
});

I added route an ziggy support in my resources/js/frontend_app.js :

import Vue from 'vue'
import axios from 'axios'
axios.defaults.crossDomain = true

import 'font-awesome/css/font-awesome.css'

Vue.config.productionTip = false
Window.axios = axios

import { createInertiaApp } from '@inertiajs/inertia-vue'

import route from "ziggy";
import { ZiggyVue, Ziggy } from 'ziggy';
Vue.use(ZiggyVue, Ziggy, route);

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        new Vue({
            render: h => h(App, props),
        }).$mount(el)
    },
})

and as result having vue template :

<template v-if="$page.props.user">
    <span class="capitalize">Welcome,</span>
    <span class="ml-1">

        111111<Link :href="route('profile.index') ">Profile A B C</Link>333333

    </span>
</template>

I see this block in console : https://prnt.sc/24aegvg but link is just cut off. How can it be fixed ?