I am trying to use the Composition API of vue 3, and struggle to handle reactive typescript objects. As I understand from the documentation, when you make an object reactive, vue wraps it and all nested objects into a Proxy and converts all Refs to Proxies as well.
The problem is that when you have a chain of nested method calls, only the first of them is invoked on Proxy wrapper (see the attached diagram for an example), and all of the remaining ones are invoked on standard typescript objects.
This inconsistency makes developing an app really hard - I have to basically support two versions of each method dealing with references - one for calling on Proxy and one for calling on a normal instance + check object types in runtime. There is not a word about such problem in the documentation. Am I right in my attempts to solve this problem, or should I throw an exception when some methods are not invoked as expected, or there is a better way of solving this issue?
I've tried to implement a typescript object, the methods of which can be called through both - reactive and non-reactive contexts.
I expected the object to handle Refs consistently regardless of whether it is called from reactive or non-reactive context.
In reality, when context is reactive, current object is actually a Proxy, and all properties typed as Refs are also Proxies, so I don't have to call value property on them to access their members. However, when the context is not reactive, all properties typed as Refs remain Refs and I have to go through their value property before accessing their nested members.
