fix: populate useState reactively in devtools

[hichem-dahi]

fixes #643

[kleinpetr]

any update here?

[antfu]

I don't think we should clone the data and update the clone eagerly - it would be very inefficient and could cost extra memory. The root cause is that we didn't properly trigger the data when they updates, but also because we are dealing with multiple Vue instances (one in host, one in devtools, where watching on a forgien reactive object won't triggers properly. I think this would need a fix with another approach

[hichem-dahi]

@antfu, I've made it possible to update only the necessary nested properties using the deepSync function. Can you check?

[antfu]

I think still, I would avoid this cloning, as it

1. duplicate the object, doubles the memory usage (could even crash when payload is too big)
2. doesn't handle the circular references
3. losing the details when serializing a class or special objects
4. it not always reflecting to the real data, sometimes could cause confusing on debugging

[hichem-dahi]

@antfu I've removed cloning. I've used toRefs(payload.state) to reference the objects. It seems to be working.

[antfu]

Looks great; I will test it a bit. Thanks a lot for being patient on this!

[antfu]

I looked into it, but it seems that using toRef in template isn't a good practice. I end up with a different approach: 418a22e, which is released as v1.3.9. Please give it a try and let me know if it solves your cases. Thanks!

[hichem-dahi]

I left a comment here.
It solves the initial issue. However, when modifying from the StateEditor, the change isn't synced.