Вкладки Vuetify с роутером - tab.isActive всегда ложно

Я пытаюсь реализовать Vuetify v-tabs с router, поэтому каждая вкладка находится на другом URL-адресе. Проблема в том, что никакая таблица не активируется. Кажется, все работает, но я не вижу никакого контента, и я заметил, что ни на одной вкладке нет isActive===true

Это оборачивающий компонент:

<template>
  <v-tabs
      v-model = "tab"
      background-color = "transparent"
      color = "basil"
      grow
      exact
  >
    <v-tab
        key = "products-update"
        :to = "{name:'products-update'}"
    >
      Update
    </v-tab>
    <v-tab
        key = "products-gallery"
        :to = "{name:'products-gallery'}"
    >
      Gallery
    </v-tab>
    <v-tab
        key = "products-preview"
        :to = "{name:'products-preview'}"
    >
      Preview
    </v-tab>

  <v-tab-item key = "products-update" value = "products-update">
    UPDATE
    <router-view></router-view>
  </v-tab-item>

  <v-tab-item key = "products-gallery" value = "products-gallery">
    GALLERY
    <router-view></router-view>
  </v-tab-item>

  <v-tab-item key = "products-preview" value = "products-preview">
    PREVIEW
    <router-view></router-view>
  </v-tab-item>
  </v-tabs>
</template>

<script>
import productForm from "@/components/dashboard/product/productForm";
import productGalleryForm from "@/components/dashboard/product/productGalleryForm"
import productPreview from "@/components/dashboard/product/productPreview";
import router from '@/router/index'

export default {
  name: "DashboardProductLife",
  components: {
    productForm,
    productGalleryForm,
    productPreview,

  },
  computed: {

  },
  data(){
    return {
      tab:null,
    }
  }
}
</script>

<style scoped>

</style>

А это маршруты:

    ...
 {
        path: '/products/detail',
        name: 'products-detail',
        component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/DashboardProductLife'),
        children: [
            {
                path: '/products/detail/create',
                name: 'products-create',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/DashboardProductForm.vue'),
            }, {
                path: '/products/detail/update/:id',
                name: 'products-update',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productForm'),
            }, {
                path: '/products/detail/gallery/:id',
                name: 'products-gallery',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productGalleryForm'),
            }, {
                path: '/products/detail/preview/:id',
                name: 'products-preview',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productPreview'),
            },
        ]
    }
    ...

Вы знаете, почему это не работает? Я также ценю лучшее решение.