State object without schema in vuex



We have a deep nested object in the vue store, although people suggest that we should avoid using the nested object, while we can not change to plain structure for the object.

Suppose we are building a json editor application which we can load json from server by a url, and then edit the content in the left component say it is EditPanel, and another component in the right for preview say it is 'PreviewPanel`.

Then we can load the json data but we do not know the schema, so we have to save json to the store.state.

Now both the EditPanel and PreviewPanel will read the json from the store. But the EditPanel itself can edit the json, which will commit the change to the store, and the store will trigger change for both panels.

Is this will cause a Recursion in store and EditPanel ?

Also, if the EditPanel is not a simple textarea but a couple of elements, so I wonder if changing a single property of the json data will result in all elements in EditPanel to refresh?