observable a class instance, autorun not trigger when add a new property

[yuwanlin]

this is my code:

class Info {
  name = 'real';

  getName() {
    console.log('getName');
    return this.name;
  }

  setName(name) {
    this.name = name;
  }
}

class Manager {
  info = observable(new Info());
  constructor() {
    makeAutoObservable(this);
    autorun(() => {
      console.log('autorun', this.info);
    });
  }
}

const m = new Manager();
// the key property is a dynamic property. when info add a new property, I want to autorun be triggered, but not.
m.info.key = 'value';

info is a class instance, I want to add dynamic property on it, but autorun not triggered.
if info is a plain object, it work ok.

https://stackblitz.com/edit/stackblitz-starters-qr1p6q?file=src%2FApp.tsx

[kubk]

Not sure if using a class is a good choice for dynamic keys. The purpose of a class is to have predictable keys. It will work if you switch to using an object:

class Manager {
  info = {};
  constructor() {
    makeAutoObservable(this);
    autorun(() => {
      console.log('autorun', this.info);
    });
  }
}

const m = new Manager();
m.info.name2 = 'value2';

https://stackblitz.com/edit/stackblitz-starters-87dpo9?file=src%2FApp.tsx

[yuwanlin]

yes, plain object is ok. https://mobx.js.org/observable-state.html#available-annotations

[urugator]

info = observable(new Info());

Won't work see: https://mobx.js.org/observable-state.html#non-convertibles

I want to add dynamic property on it

For observables created with make(Auto)Observable or observable(x, { proxy: false }), these should work:
https://mobx.js.org/api.html#collection-utilities-