I have some problems with Vue 3 meta tags. The problem is, when I want to set value to router, it's loading setup twice, and sending all requests and everything in setup() double.

So I have router defined like this:

 {
        path: '/product/:id',
        name: 'products',
        component: () => import('@/components/layouts/layout.vue'),
        children: [
          {
            path: '',
            name: 'product.details',
            meta: {
              title: "My website",
              layout: 'default',
              requiredAuth: false,
              breadcrumbs: ref("")
            },
            props: (route: any) => ({
              id:  parseInt(route.params.id),
            }),
            component: () => import('@/components/views/ProductDetailsPage.vue'),
          }
}

So In ProductDetailsPage.VUE I have useRoute function and assigning breadcrumbs value, and it looks like so:

setup() {
  const route = useRoute();
  route.meta.breadcrumbs.value = 'test'
}

Sorry, I can't share full code here, but the problem is clearly from this line of code. When I remove route.meta.breadcrumbs.value = 'test' it's working fine, but I need to set this breadcrumbs.

Anyone had similar problems? Am I doing something wrong here?