Watch reactivity not guarantee when using with vue router props pass in compare to route.params change

[trchopan]

Summary:
Affected version: v3.2.45
Issue: props pass in by router, props update not guarantee before route change. Some case the route change happens before props update.

Detail:

During development of application that use watch function to detect change of vue route.params we experience a delay in the change of props passed in by the vue-router.

Here is the code:

Vue router file router/index.ts

const router = createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/projects/:projectName',
    children: [
      {
        path: 'storage',
        children: [
          {
            path: 'spaces/:environment',
            name: RouteName.SpaceDetail,
            component: () => import('@/views/DemoTestView.vue'),
            props: true, // <= pass route params by props
          },
        ],
      }]
  }]
})

Composable for getting the project name from route useCurrentProject.ts

export const useCurrentProject = () => {
    const route = useRoute()

    const currentProjectName = computed<string>(() => {
        return route.params.projectName as string
    })

    return {
        currentProjectName,
    };
};

DemoTestView.vue

<script setup lang="ts">
import {computed, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {useCurrentProject} from "@/composables/useCurrentProject.tsx";

const props = defineProps<{
    environment: string;
}>();

const {currentProjectName} = useCurrentProject()
const computedName = computed(() => `computedName:${currentProjectName.value}`)
const usingProps = ref<string>('')
const usingParams = ref<string>('')

const route = useRoute()

watch(props, () => {
    console.log(props)
})

watch(route, async () => {
    console.log(JSON.stringify(route.params), JSON.stringify(props))
    usingParams.value = String(route.params.environment)
    usingProps.value = String(props.environment)
}, {immediate: true})
</script>

<template>
    <div class="demo-test">
        <h1>This is the test route view</h1>
        <p>params: {{usingParams}}</p>
        <p>props: {{usingProps}}</p>

        <p>params: {{route.params.environment}}</p>
        <p>props: {{props.environment}}</p>
        <p>computed project name: {{computedName}}</p>
    </div>

</template>

<style scoped>
    .demo-test{
        margin-left: 250px;
    }
</style>

With the code above the props.environment inside the watch(route, ...) function is not updated.

During investigation the code in the component run watch(route, ...) then watch(props, ...) after.

Additionally, I'm in version v3.2.45, we find out that when using vue v3.3.11 the watch(props, ...) behave as expected and run before the route change but could not find the related behavior change.

My question is: in version v3.2.45, does the watch function on route reactive run before the passed in props change or the order is not guarantee?