how to get observable passed to field initialization to work

[da1z]

i have something like this, and reaction never react on option changes. as i understand at the moment of field initialization options are not observable yet. how can i fix it:

class FieldWithOptions {
    constructor(public options: { value: string }) {
        makeObservable(this);
        reaction(
            () => this.options,
            () => {
                console.log('Reacting');
            }
        );
    }
}

class SomeStore {
    @observable value = 'initial value';

    field = new FieldWithOptions(this.options);
    constructor() {
        makeObservable(this);
    }

    @computed
    get options() {
        return {
            value: this.value,
        };
    }
}

[urugator]

at the moment of field initialization options are not observable yet

That's true, but more importantly options never change in your example.
field = new FieldWithOptions(this.options);
simply evaluates to:
field = new FieldWithOptions({ value: this.value });
So you just set options in FieldWithOptions to this particular object during construction.
You're not passing anything mutable/observable to the FieldWithOptions
You could for example pass whole instance:

class FieldWithOptions {
    constructor(private readonly optionsStore: { options: { value: string } }) {
        reaction(
            () => this.someStore.options,
            () => {
                console.log('Reacting');
            }
        );
    }
}

class SomeStore {
    @observable value = 'initial value';

    readonly field: FieldWithOptions ;
    constructor() {
        makeObservable(this);
        // Initialize FieldWithOptions after makeObservable call, so that `SomeStore` is already observable in FieldWithOptions constructor
        this.field = new FieldWithOptions(this);
    }

    @computed
    get options() {
        return {
            value: this.value,
        };
    }
}

or standalone computed/observable

class FieldWithOptions {
    constructor(private readonly options: { get: () => { value: string } }>) {
        reaction(
            () => this.someStore.options.get(),
            () => {
                console.log('Reacting');
            }
        );
    }
}

class SomeStore {
    @observable value = 'initial value';
    readonly options = computed(() => {
        return {
            value: this.value,
        };
    });
   readonly field: FieldWithOptions;
    constructor() {
        makeObservable(this);
        this.field = new FieldWithOptions(this.options);
    }}
}

[da1z]

Sorry late reply. I cannot pass whole store. Option are changed later but not in example code.

[ZoranRavic]

Then you can use his second example with computed() and options.get()

Although you don't need to keep it as a class field, you can do it inline:

this.field = new FieldWithOptions(computed(() => ({ value: this.value })));

Also if you're doing typescript it would be simpler to write

options: IComputedValue<{ value: string }>