test: boiling down repro

Author: posva

playground/router.ts

@@ -4,6 +4,7 @@ import Nested from './views/Nested.vue'
 import NestedWithId from './views/NestedWithId.vue'
 import Dynamic from './views/Dynamic.vue'
 import User from './views/User.vue'
+import Increment from './views/Increment.vue'
 import NotFound from './views/NotFound.vue'
 const component = () => {
   console.log('fetching component')
@@ -35,6 +36,12 @@ export const router = createRouter({
         params: { id: String(Math.round(Math.random() * 100)) },
       }),
     },
+    {
+      path: '/bug/:increment',
+      name: 'inc',
+      component: Increment,
+      props: route => ({ increment: route.params.increment }),
+    },
     { path: '/users/:id', name: 'user', component: User, props: true },
     { path: '/documents/:id', name: 'docs', component: User, props: true },
     { path: '/optional/:id?', name: 'optional', component: User, props: true },

playground/views/ChildComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>{{ injected }}</div>
+  <router-link :to="newLocation">Increment {{ injected }}</router-link>
+</template>
+
+<script>
+import { inject, watch, computed } from 'vue'
+export default {
+  name: 'ChildComponent',
+  setup() {
+    const injected = inject('increment')
+
+    watch(injected, () => {
+      console.log('route param changed', injected.value)
+    })
+
+    const newLocation = computed(() => ({
+      name: 'inc',
+      params: { increment: Number(injected.value) + 1 },
+    }))
+
+    return {
+      injected,
+      newLocation,
+    }
+  },
+}
+</script>

playground/views/Increment.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <!-- <router-link
+      :to="{ name: 'inc', params: { increment: Number(increment) + 1 } }"
+      >Increment at root</router-link
+    > -->
+    <child-component />
+    <child-component />
+    <div style="height: 200px"></div>
+  </div>
+</template>
+
+<script>
+import { provide, toRef, toRefs, watchEffect } from 'vue'
+import ChildComponent from './ChildComponent.vue'
+import { useRoute, useRouter } from '../../src'
+
+export default {
+  components: { ChildComponent },
+  name: 'ProvideComponent',
+  props: ['increment'],
+  setup(props) {
+    const increment = toRef(props, 'increment')
+    const route = useRoute()
+    const router = useRouter()
+
+    provide('increment', increment)
+
+    watchEffect(() => {
+      console.log('prop', increment.value)
+    })
+
+    watchEffect(() => {
+      console.log(
+        'router.currentRoute',
+        router.currentRoute.value.params.increment
+      )
+    })
+
+    watchEffect(() => {
+      console.log('route.params', route.params.increment)
+    })
+
+    return { increment }
+  },
+}
+</script>