JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/built/bundle.js"></script>
<div id='root'></div>

<button onclick="updateSimpleNumber()">updateSimpleNumber</button>
<button onclick="updateSimpleString()">updateSimpleString</button>
<button onclick="addSimpleArray()">addSimpleArray</button>
<button onclick="removeSimpleArray()">removeSimpleArray</button>
<button onclick="initSimpleArray()">initSimpleArray</button>
<button onclick="updateMap()">updateMap</button>
<button onclick="updateArticle()">updateArticle</button>
<button onclick="fullUpdateArticle()">fullUpdateArticle</button>
<button onclick="toggleUseName()">toggleUseName</button>
<button onclick="updateName()">updateName</button>

JavaScript

// import { observable, observe } from "dob"

const dynamicObj = observable({
    simpleNumber: 1,
    simpleString: "text~",
    simpleArray: [1, 2, 3, 4, 5],
    map: new Map([ ["a", 1], ["b", 2], ["c", 3] ]),
    deepObj: {
    	user: {
      	articles: [{
        	title: "nodejs"
        }]
      }
    },
    useName: false,
    name: 1
})

let runCount = 0

observe(() => {
		runCount ++

    document.getElementById("root").innerHTML = 
      "simpleNumber: " + dynamicObj.simpleNumber + "<br/>" +
      "simpleString: " + dynamicObj.simpleString + "<br/>" +
      "simpleArray: " + dynamicObj.simpleArray + "<br/>" +
      "map: " + dynamicObj.map.get("a") + "<br/>" +
      "article: " + dynamicObj.deepObj.user.articles[0].title + "<br/>" +
      "name: " + (dynamicObj.useName ? dynamicObj.name : "not used") + "<br/>" +
      "runCount: " + runCount
})

function updateSimpleNumber() {
	dynamicObj.simpleNumber++
}
function updateSimpleString() {
	dynamicObj.simpleString += "~"
}
function addSimpleArray() {
	dynamicObj.simpleArray.push(Math.floor(Math.random() * 10))
}
function removeSimpleArray() {
	dynamicObj.simpleArray.pop()
}
function initSimpleArray() {
	dynamicObj.simpleArray = [1, 2, 3, 4, 5]
}
function updateMap() {
  dynamicObj.map.set("a", Math.random())
}
function updateArticle() {
	dynamicObj.deepObj.user.articles[0].title = "星球大战"
}
function fullUpdateArticle() {
  dynamicObj.deepObj.user.articles[0] = {
  	title: "三体"
  }
}
function toggleUseName() {
	dynamicObj.useName = !dynamicObj.useName
}
function updateName() {
	dynamicObj.name++
}