[Navigation Guard - Vue setup] onBeforeRouteUpdate not working when using the same component for different routes

[JasmineLaiHua]

This is part of my route file, where I have registered component SaleOrderForm for the two different routes: /:id and /create, in the inner of component, I have defined onBeforeRouteUpdate to react to the route change but seem it doesn't get called.
I want to re-use a component for both detailed and create new, I know that I can watch the route params to achieve this but I think onBeforeRouteUpdate is a more suitable approach as it is the suggestion from doc

Any helps or suggestions would be highly appreciated. Thanks all!

{
      path: '/saleorder/:id',
      name: 'sale-order',
      component: () => import('../views/SaleOrderForm.vue')
},
{
      path: '/saleorder/create',
      name: 'sale-order-create',
      component: () => import('../views/SaleOrderForm.vue')
},`

<script setup>
import { useRoute, onBeforeRouteUpdate } from 'vue-router';

...
onBeforeRouteUpdate((to, from) => {
    console.log('to', to);
    console.log('from', from);
});
<script>

[posva]

beforeUpdate is only for the same route, e.g. one param to another. You can use a global router.beforeEach(). Ideally, new hooks should be added to play well with the composition API:

import { onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

function onBeforeNavigation(fn) {
  const router = useRouter()
  const remove = router.beforeEach(fn)
  onUnmounted(remove)
}

For now, you can add this to your codebase

[JasmineLaiHua]

Thank you!