unexpected makeAutoObservable overrides

[sheyunsi]

Intended outcome:

import { autorun, makeAutoObservable, observable } from "mobx";

export class ABC {
  constructor() {
    makeAutoObservable(this, {
      data: observable.ref
    });
    autorun(() => {
      if (!this.data) return;
      console.log("DATA CHANGED ", this.data);
    });
  }

  data = null;

  setData = (key) => {
    this.data = { k: "key", v: "value" };
    console.log(`${key}: SET DATA!`);
  };
}

setTimeout(() => {
  const abc1 = new ABC();
  abc1.setData("abc1");
}, 1000);

setTimeout(() => {
  const abc2 = new ABC();
  abc2.setData("abc2");
}, 2000);

output is expected:

abc1: SET DATA! 
DATA CHANGED   {k: "key", v: "value"}

abc2: SET DATA! 
DATA CHANGED   {k: "key", v: "value"}

Actual outcome:

abc1: SET DATA! 
DATA CHANGED   {k: "key", v: "value"}

abc2: SET DATA! 
// abc2.data is not observabled
// makeObservable(this, { data: observable.ref,  setData: action}) it's work

How to reproduce the issue:
https://codesandbox.io/s/withered-star-pmk0z?file=/src/index.js

Versions

mobx: 6.17

[akphi]

@sheyunsi Thank you so much! I was stuck for hours with this and don't even know where to debug, then I searched for makeAutoObservable observable.ref and found your issue 😭

Really weird bug so thank you so much for the fix @iChenLei! Do you know if we can get this out as a patch ASAP when your change is approved/merged? I'm kinda caught in the middle of my upgrade to mobx@6.1.x.

[iChenLei]

I will mentioned this issue in mobx team gitter channel, hope it can be fixed as soon as possible and release a new version.

EDIT: see #2836