Define Watcher/Computed for dynamic data "location" - even possible?

[plc-dev]

I'm not totally sure whether this is trivially solvable and I merely lack the terminology to search for the solution, or it is actually not doable. So apologize in advance if I may have opened a question for an already documented/answered use case.

I'm looking for a way to watch some nested data, e.g.

{
  "foo": {
     "bar": "baz" // data to be watched
  }
}

But the exact location of the data is only known at runtime and encoded in a string in the shape of foo__bar. Let's call that a dependency of a component.

A function then returns a computed property as an object with the values of the dependencies, if the paths to the dependencies exist in the data at that point, e.g.

{
  bar: "baz"
}

Now, how would I watch for the emergence of the path/location for a dependency in the data, so I can update the value of the dependencies?

The only solution I've come up with so far, is to watch the entire state with a deep watcher, or a sufficiently nested substate, for which I know it will contain all "dependency-paths/-locations".

Due to performance reasons I'd prefer to only directly watch for the occurrence of the dependencies location in the data and then subsequently only for changes in that data, if that is at all possible.

I hope the example is somewhat clear. I'll happily try to clarify further if needed.

[qin-guan]

Hello @plc-dev, I am not sure if I understand your question correctly.

From what I understand, you are looking to implement a dynamic watcher?

If so, I have made a very basic demo below, please let me know if it helps!

https://stackblitz.com/edit/vue3-dynamic-watcher-demo?file=src%2FApp.vue&terminal=dev

If not, please let me know what I missed!