Vue 3 has great support for reactive objects i.e. changes to the object can be watched and immediately propagated to the UI rendering. Yjs is similarly reactive. I would like to connect the sync power of Yjs with the reactivity of Vue. Ideally just the Vue object should be touched and the rest happens in the background.
I made an example where on each change in Yjs the Vue object gets updated and vice versa. It turned out, this can end up in infinite loops, therefore I just update by property now, if they are not equal.
So my questions are:
- Is there a simpler or better approach achieving this?
- Is it ok if Y.Map has deep complexity like nested objects and arrays?
- And will Yjs be smart enough to tell the partial differences, even if such a large subtree is replaced?