How to set Vuetify tabs to active based on url

Question

I'm using vue 2.6.11, vuetify 2.2.9 and ziggy 0.8.1. For the Vuetify tabs I have the following:

<template>
    <v-tabs
        background-color="transparent"
        slider-color="secondary"
        icons-and-text
        dark
        :value="`${route().current()}`"
        v-model="active_tab"
    >
        <v-tab
            :href="route('project.projects.show', $page.project.id)"
            link
            exact
            key="project.projects.show"
        >
            Project
        </v-tab>

        <v-tab
            :href="route('project.projects.company', $page.project.id)"
            link
            exact
            key="project.projects.company"
        >
            Company
        </v-tab>

        <v-tab
            :href="route('project.invoices.index', $page.project.id)"
            link
            exact
            key="'project.invoices.index"
        >
            Invoices
        </v-tab>
    </v-tabs>
</template>

<script>
export default {
    data()
    {
        return {
            active_tab: `${route().current()}`,
        }
    },
}
</script>

Depending on the location of route().current() it returns a different value. In the <template> it returns the full URL and in the <script> it only returns the Laravel route name. The problem is even though the key and route().current() match, the corresponding tab still isn't set to active.

Have looked at Vuetify: How to preselect active tab? but none of the answers work.

Update

After looking at it some more it turns out that active_tab: `${route().current()}`, is always set to wrong URL. For example when on the invoices route it still returns the url for the project. So it is related to ziggy.

Answer 1

Looks like that setting the v-model attribute of v-tabs equal to window.location.href in the data object solves it.