Need help using global appModel/understanding data binding

Hi - I am starting to learn preact/vdom/data-binding internals, and as an experiment looking to port automatic data-binding (like in vue.js framework by the use of watchers) to preact. It would be on the lines of generating a watch expression for all dependencies in a component and then subscribing to it by using Object proxies whenever an attribute changes. The idea is to implement something like this:

A global object representing the state of various pieces:

var appModel = {
  'user': {  },
  'tweets': [ ],
  'notifications': [],
  'followers': []
}

And, different components watching/binded over parts of the above model:

Preact.render(<ProfileBox user={ appModel.user } />, document.getElementById('profile'));
Preact.render(<TweetList list={ appModel.tweets } />, document.getElementById('tweetList')); 

1. What would be a good starting point to explore this?
2. Are there ways already with preact to achieve something like above?
3. Are there any major challenges that are foreseen in developing an example as above.

[yaodingyd]

If you are looking for a single global object model for state change, then it’s exactly what Redux is doing: one single data store which is the sole source of truth. But I think the focus of what you want to achieve is notification through mutation, not to call setState repeatedly.

[sangupta]

Am closing this one now, as my queries have been answered. Thanks to everyone on the team.