Mobx Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="//npmcdn.com/[email protected]/index.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<button onclick="dump()">Dump</button>
<button onclick="merge()">Merge</button>
<div id="log"></div>

Babel + JSX

const {observable, autorun} = mobx;

class Store {
  @observable data = {
    foo: 'bar'
  }
  replaceFromDump(newData) {
  	this.data = newData
  }
}

const store = new Store()

autorun(() => {
	document.getElementById('log').innerHTML += `${store.data.foo}<br>`
})

dump = () => {
	store.replaceFromDump({ foo: 'bar' })
}

merge = () => {
	store.data.foo = 'bar'
}