Watcher on Vue Router Vue3

Question

I'm trying to create a watcher on Vue Route to capt the value changing of a property defined in route meta object.

This is my code in the App.vue file

<script setup lang="ts">
import { watch } from "vue"
import { useRoute } from 'vue-router'

const route = useRoute();
watch ( () => route.meta.layout, layout => {
  console.log(layout);
})

</script>

However nothing happens when the path change.

What is wrong in this code?

UPDATE

Here my index.ts file for vue-router

import { createRouter, createWebHistory } from "vue-router";
import UsersView from "@/views/UserView.vue";
import GatewayView from "@/views/GatewayView.vue";
import NotFoundView from "@/views/NotFoundView.vue";
import { LayoutsName } from '@/layouts/LayoutsNameEnum';

const routes = [
  { 
    name: "root",
    path: '/', 
    redirect: '/gateway' 
  },
  {
    name: "notFound",
    path: "/:pathMatch(.*)*", 
    component: NotFoundView,
    meta: {
      layout: LayoutsName.EmptyLayout,
    }
  },
  {
    name: "gateway",
    path: "/gateway",
    component: GatewayView,
    meta: {
      displayName: 'GATEWAYS',
      icon: 'mdi-antenna',
      layout: LayoutsName.DashboardLayout,
    }
  },
  {
    name: "users",
    path: "/users",
    component: UsersView,
    meta: {
      displayName: 'USERS',
      icon: 'mdi-account-group',
      layout: LayoutsName.DashboardLayout,
    }
  }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
});

export default router;