How to set Vuetify tabs to active based on url

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.

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