Mobx is not observing object properties which were not defined on initialization

Question

Example Code

interface Car {
   id: string,
   wheels: string,
   engine: string
}

class ExampleStore {
@Observable car:Car

public set car(value: Car){
    this.car = value
}
}

//Setting value of the car for the first time

const carExample = {
   id: "122",
   engine: "ABC and co."
}

car(carExample)

// Updating the value of car

const carExampleUpdate = {
   id: "122",
   wheels: "",
   engine: "ABC and co."
}

Here the issue is when you set the value of the car for the first time without wheels property, Mobx does not observe wheels by default. So when you update the value of car with wheels Mobx still will not observe the wheels property because it was not mentioned in initial set.

How do we make the mobx observe the wheels property?

Answer 1

To answer this we just need to use extendObservable

 extendObservable(this.car, { wheels: "4" });

Once you use this then after that mobx starts observing the property.