Is there something like useKeyedRef?

[AmitJoki]

Here's the scenario:

Let's say you have the following route entry:

{
      path: '/foo/:id',
      component: RouteComponent,
      props: true
}

And in RouteComponent you have the following code:

<template>
const computedProperty = computed(() => props.id);
const normalRef = ref('');
</template>

Now with this setup, computedProperty is always going to be correct whenever we switch between multiple URLs. But the normalRef which is a regular ref won't. Since the component instance is cached updating normalRef it in one url /foo/1 will reflect in /foo/2 when they both should have their own copies.

This could be solved if we have a keyed ref. Here's an example composable:

import { watch, type Ref, ref, computed, type MaybeRef, unref } from 'vue';
const refMap: Record<string, Ref> = {};

function useKeyedRef<T>(key: Ref<string>, initialValue: T) {
  watch(
    key,
    (val) => {
      if (refMap[val] === undefined) refMap[val] = ref(initialValue);
    },
    { immediate: true },
  );

  const value = computed<T>(() => refMap[key.value]?.value ?? initialValue);
  function update(rawKey: MaybeRef<string>, newValue: T) {
    refMap[unref(rawKey)].value = newValue;
  }

  return { value, update };
}

Now we can do:

const { normalRef, updateNormalRef } = useKeyedRef(computedProperty, '');
normalRef; // read
updateNormalRef(computedProperty, 'new value'); // write

Here's a playground link. where clicking on 1, 2, 3 buttons is supposed to simulate different routes.

My questions are:

1. Does such a feature already exist with perhaps some other name in either Vue or VueUse?
2. Is the above composable good enough for such a use case and if it could be improved how?
3. If there's a completely different approach to solving this, I'd like to know as well.

Thanks.

[LinusBorg]

If the component has local state that is independent of the route, and you want to use that component in a dynamic route like this, you use the key prop to let Vue (or rather here: vue-router) know when it should actually create a new component:

 <router-view v-slot="{ Component }">
  <!-- key can have other values depending on the usecase/context --> 
  <component :is="Component" :key="$route.fullpath"
</router-view>

[AmitJoki]

@LinusBorg It is dependent on the route hence keyed ref where key would be the dynamic route id + some other identifier.

I have made a codesandbox with the proposed :key solution but it doesn't work because of erasure of previous local data.

There are three links 1, 2, 3. Go on 1 and click Increment me button 1 time. Go to 2 and click it 2 times. Now go to 1 again, it will be 0. Go on 2 and it will be 0.

Expectation: The local state is persisted with the key so I could visit 1, 2, 3 however times I want and click the count button as many times as I want and all three routes would have their own count numbers as I had left them.

This brings to my useKeyedRef implementation which works like that in this playground

where the key is the dynamic route ID so each route has its own copy of data.

I was wondering if

1. Such a feature already exists with perhaps some other name in either Vue or VueUse so I am not reinventing the wheel.
2. Is the above composable good enough for such a use case and if it could be improved how?
3. If there's a completely different approach to solving this knowing the expected result of wanting each route to maintain its own local state.