The code snippet:

<div>
    <v-tabs
      class="tabs"
      centered
      grow
      height="60px"
      v-model="activeTab"
    >
      <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact>
        {{ tab.name }}
      </v-tab>
    </v-tabs>
    <router-view></router-view>
</div>

And the JavaScript section:

  data() {
    return {
      activeTab: `/user/${this.id}`,
      tabs: [
        { id: 1, name: "Task", route: `/user/${this.id}` },
        { id: 2, name: "Project", route: `/user/${this.id}/project` }
      ]
    };
  }

Routing information:

{
  path: "/user/:id",
  component: User1,
  props: true,
  children: [
    {
      path: "", //default selected tab
      component: TaskTab
    },
    {
      path: "project",
      component: ProjectTab
    }
  ]
}

View codesandbox example

Adding some tips on animations and explaining the difference between v-tab-items and v-tab-item.

If you've noticed, the following markup will prevent the v-tabs tab switch animation from working:

<v-tabs v-model="activeTab">
  <v-tab key="tab-1" to="/tab-url-1">tab 1</v-tab>
  <v-tab key="tab-2" to="/tab-url-2">tab 2</v-tab>
</v-tabs>
<router-view />

If you want the tab switch animation to work, here's one way to achieve it.

<v-tabs v-model="activeTab">
  <v-tab key="tab-1" to="/tab-url-1" ripple>
    tab 1
  </v-tab>
  <v-tab key="tab-2" to="/tab-url-2" ripple>
    tab 2
  </v-tab>

  <v-tab-item id="/tab-url-1">
    <router-view v-if="activeTab === '/tab-url-1'" />
  </v-tab-item>
  <v-tab-item id="/tab-url-2">
    <router-view v-if="activeTab === '/tab-url-2'" />
  </v-tab-item>
</v-tabs>

You can also use a v-for loop on your v-tab and v-tab-item tags, as long as the value of to is found among the id attribute of your v-tab-items.

If you need to separate your tab contents from the tab buttons, you can use v-tab-items. Place the v-tab-items in a v-tab-items tag outside the v-tabs component, ensuring you give it a v-model="activeTab" attribute.

Integrating Animations and Swipe Functionality

Retain your current query parameters for enhanced usability, especially if your URL includes a :locale parameter:

Template

<v-tabs v-model="activeTab">
   <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.to">
    {{ tab.name }}
  </v-tab>
</v-tabs>

<v-tabs-items v-model="activeTab" @change="updateRouter($event)">
  <v-tab-item v-for="tab in tabs" :key="tab.id" :value="tab.to">
    <router-view />          
  </v-tab-item>
</v-tabs-items>

Script

export default {
  data: () => ({
    activeTab: '',
  }),
  computed: {
    tabs() {
      return [
        { id: 1, name: 'Tab one', to: this.getTabPath('routeName1') },
        { id: 2, name: 'Tab two', to: this.getTabPath('routeName2') },
        { id: 3, name: 'Tab three', to: this.getTabPath('routeName3') },
        { id: 4, name: 'Tab four', to: this.getTabPath('routeName4') },
      ]
    },
  },
  methods: {
    getTabPath(name) {
      // Retrieve the path while maintaining parameters. Useful when handling a :locale in the URL:
      return this.$router.resolve({ name, params: this.$route.params }).href
    },
    updateRouter(path) {
      // Executed when swiping occurs.
      this.$router.push(path)
    },
  },
}

Utilizing $router.resolve to acquire the path from a route object, detailed explanation provided here.

Both @roli-roli and @antoni have provided accurate answers, but they are missing a crucial detail. While their methods are almost equivalent, there is an issue with mobile views; specifically, tabs become swipeable in these conditions. However, swiping does not update the route as expected, causing a transition from Tab A with component A to Tab B with component B to result in an animation and a change in the activeTab, but not an update in the router.

TL;DR Swiping the v-tab-item does not update the router, resulting in the same component being displayed under each tab.

Possible solutions include disabling the swipeability of v-tab-item or listening for the change event of the tab component to update the router accordingly. The latter solution is recommended (as swiping can be useful in certain scenarios) , but it may cause the router to update twice when clicking on the tab's label.

Here's a functional example based on @roli-roli's answer

Template

<template>
    <v-tabs v-model="activeTab">
        <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route">{{ tab.name }}</v-tab>

        <v-tabs-items v-model="activeTab" @change="updateRouter($event)">
            <v-tab-item v-for="tab in tabs" :key="tab.id" :to="tab.route">
                <router-view />          
            </v-tab-item>
        </v-tabs-items>
    </v-tabs>
</template>

Script

export default {
    data: () => ({
        activeTab: '',
        tabs: [
            {id: '1', name: 'Tab A', route: 'component-a'},
            {id: '2', name: 'Tab B', route: 'component-b'}
        ]
    }),
    methods: {
        updateRouter(val){
            this.$router.push(val)
        }
    }
}

Router

Configure as per previous responses.

// Hyperlinks within a component
 <v-btn @click="goToUrl({name: 'RouteName1'})">
    .....
<v-list-item-title 
    @click="goToUrl({name: 'RouteName2'})"
>
    Some tab link text
 </v-list-item-title>
    ....


// Tab menu and its content in another component
<v-tabs>
    <v-tab key="key_name1" :to="{ name: 'RouteName1'}">Some link 1</v-tab>
    <v-tab key="key_name2" :to="{ name: 'RouteName2'}">Some link 2</v-tab>

<v-tab-item key="key_name1" value="/url/for/route1">
    ....
<v-tab-item key="key_name2" value="/url/for/route2">
    ....

Here's a solution to prevent double mounting of a new component when switching tabs. For more details, check out the question and answer here.

In short, using a v-for within the div can cause the component to be created, destroyed, and created again with each tab switch. This can lead to unnecessary calls to the backend. By wrapping the div with a unique key, you can avoid this issue.

I delve deeper into the reasons behind this behavior in the answer.