createViewModel doesn't work correctly with setters for computed values

In my model I have several computed getters and accordingly setters, to derive the plain values from.

Simple example:

import { computed, observable } from 'mobx';

export default class Car {

  @observable public colorCode = 'red';

  @computed
  public get colorInstance(): any {
    return { colorCode: this.colorCode };
  }

  public set colorInstance(colorInstance: any) {
    this.colorCode = colorInstance.colorCode;
  }
}

If I now create a view model from it using createViewModel, changes applied to the colorCode property are directly visible in the view. If I instead apply changes by using the colorInstance setter, it seems to have no effect. See here for the full, running example: https://codesandbox.io/s/reverent-dew-pb6mh

When looking at the generated getters and setters in the code, the observation makes sense: computed values are always read from localComputedValues, while changes are always written to localValues. Hence, in my example colorInstance is written to the localValues colorInstance but read from localComputedValues, where it will never be up-to-date.

Is this a bug or is it intended to work like that and I made a mistake somewhere?

If you need further details, feel free to ask.

[ahoisl]

I fixed this issue independently in one of my projects, then saw this issue and now did go forward and merged my implementation with the proposed fix in this thread. See and please review the open PR.

Additionally, if one is interested in a “deep” view model, one that is also able to transparently work with nested objects and arrays, then I could go forward and try to merge my private implementation into the mobx-utils, too…

[alex3683]

So another solution would be to completely forbid the usage of getters / setters in view models…

Please don’t. I use them a lot to transform string references into instances of other models and back. I think this is one of the greatest mobx features (including all the others 😉)