Navigationdrawer lags update with InertiaJS and Vuetify on Persistent layout

Question

I have a setup with InertiaJS and Vuetify, and i can't get my navigationdrawer to work properly. I have the navdrawer in a layout which is persistent. Now, if i select a navigation link, the link won't update until i leave or enter the bar after the new page has loaded.

I tried different things, like

• adding a key to the links.
• removed the link and did the routing in a function
• tried to change the classes with a condition.

All approches fail which indicates that the persistent layout just does not re-evaluate the v-list-item's or something like that. That the navbar doesn't get re-rendered is ofcourse intentional, but why don't the seperate links get evaluated?

Any ideas?

My navdrawer:

<script setup>
import { Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';

const drawer = ref(true);

const open = ref([]);

const logout = () => {
    router.post(route('logout'));
}

</script>
<template>
    <div>
        <v-app-bar app>
            <v-toolbar>
                <v-toolbar-title>Jetify</v-toolbar-title>
            </v-toolbar>
        </v-app-bar>
        <v-navigation-drawer v-model="drawer" app location="left">
            <v-list color="primary" >
                <v-list-item title="Home" value="Home" :href="route('home')"
                    :active="route().current('home')" ></v-list-item>
                <Link :href="route('dashboard')"><v-list-item title="Dashboard" value="Dashboard"
                    :active="route().current('dashboard')" ></v-list-item></Link>
                <Link :href="route('users')"><v-list-item title="Gebruikers" value="Users"
                    :active="route().current('users')" > </v-list-item></Link>
            </v-list>
        </v-navigation-drawer>
    </div>
</template>
<style scoped>
.navButton {
    height: 100% !important;
    border-radius: 0 !important;
}

.sideButton:hover:before {
    opacity: 0;
}

a {
    text-decoration: none;
}
</style>

My Dashboard page as an example where the presistent layout is called

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'

defineOptions({ layout: AppLayout })

</script>
<template>
        <h2 class="text-center mb-3" v-if="$page.props.user">Welcome to your Dashboard, {{ $page.props.user.name }}</h2>
        <v-row>
            <v-col>
                <v-card-title>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </v-card-title>
                <v-card-text>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat aliquam turpis,
                    id facilisis magna suscipit nec. Nam sed facilisis mi. Maecenas pharetra velit sagittis
                    accumsan viverra. Nulla aliquam fringilla ex, et vestibulum arcu posuere sit amet. Morbi
                    posuere ultrices rhoncus. Nullam rhoncus eget risus non aliquet. Nam eleifend fringilla
                    euismod. Sed tellus arcu, volutpat vel rutrum eget, aliquet in diam. Quisque nec tempus
                    metus. Sed vestibulum orci in ullamcorper mollis.
                </v-card-text>
            </v-col>
        </v-row>
</template>

And my AppLayout:

<script setup>
import Navigation from '@/Components/Nav.vue';
</script>
<template>
    <v-app id="mine" app theme="light"  class="my-auto bg-grey-lighten-4">
        <v-container class="my-auto ">
            <navigation />
            <v-main >
                <v-row>
                    <v-col>
                        <slot />
                    </v-col>
                </v-row>
            </v-main>
        </v-container>
    </v-app>
</template>

<style>
    html {overflow-y: auto !important}
</style>