Mobx 动作改变 obj observable 不重新渲染 React

Question

我有一个简单的 mobx 商店：

class Test {
  data;
  constructor() {
    this.data = { "1": { user: { name: "user0" } } };
    makeAutoObservable(this);
  }

  get getData() {
    return this.data;
  }

  changeData1() {
    const newObj = { user: { name: "user1" } };
    this.data["1"] = newObj;
  }

  changeData2() {
    const newObj = { user: { name: "user2" } };
    const item = this.data["1"];
    item.user.name = newObj.user.name;
  }

  changeData3() {
    const item = this.data["1"];
    const newObj = { user: { name: "user3" } };
    this.changeObjUtil(item, newObj);
  }

  changeObjUtil(obj1, obj2) {
    obj1 = obj2;
  }
}

如果我将使用 changeData1 和 changeData2 操作，它将触发计算并重新渲染反应组件 但是当将 changeData3 操作与 changeObjUtil func 一起使用时，即使由于对象作为函数的引用传递，它也不会呈现

任何解释？

React Component : 
const t = new Test();

export default observer(function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => t.changeData1()}>changeData1</button>
      <button onClick={() => t.changeData2()}>changeData2</button>
      <button onClick={() => t.changeData3()}>changeData2</button>

      <div>
        {Object.keys(t.getData).map((key) => {
          const item = t.getData[key];
          return <div key={key}>{item.user.name}</div>;
        })}
      </div>
    </div>
  );
});

代码沙盒

谢谢！