What is the best way to associate a data object with visualization objects?

Question

JavaScript

There are objects containing digital data. These objects are interconnected, since for each object percentages are calculated relative to other objects. I need to visualize this data in the form of charts.
Each object is displayed with its own diagram. When data is changed in any of the objects, the percentages in all the others are recalculated and all charts are changed.

Previously, I did this:
the data object (which, as it were, the main object in the schema) contained a field that referred to the chart's html object, through the properties of which I set and updated the values ​​for display on the screen.

Now I want to remake this approach, since I don't really like that the object whose mission is to store and process
tsiferki, also causes setters for the view. I also need an additional view for text output.
Then it may be needed for some other types of display. So nested property references are no good.

What is the best way to proceed, what approach to use? Wrap in additional controller? Coat with events?

ps
This is a component of a tool for distributing power among units, so if you delay the decision too much, a whole colony of small bytes will die of starvation! =\

Answer 1

Vuex!?

Answer 2

Usually yes, they are covered with events. The data has changed and informed all subscribers about it. But you can use reactivity libraries, for example, MobX, then everything will be easier and more convenient.