Observer and computed not working with reaction

[rsys-zeeshan-iqbal]

`
import 'package:mobx/mobx.dart';

      part 'auth_store.g.dart';
      class AuthStore = AuthStoreBase with _$AuthStore;
      
      abstract class AuthStoreBase with Store {
        AuthStoreBase() {
          _setupValidations();
        }
      
      
      
        late List<ReactionDisposer> _disposers;
      
      
        void _setupValidations() {
          _disposers = [
            reaction((_) => _selectedCountryIndex, setSelectedCountryIndex,
                fireImmediately: true),
          ];
        }
      
        @observable
        int _selectedCountryIndex = 0;
      
        @computed
        int get selectedCountryIndexInt => _selectedCountryIndex;
      
        @action
        void setSelectedCountryIndex(int val) {
          _selectedCountryIndex = val;
        }
      
        @computed
        String get selectedCountryCode => "+$_selectedCountryIndex";
      
        // ------------------ Disposer ------------------
        void dispose() {
          for (var e in _disposers) {
            e();
          }
        }
      }

`

When using computed flags in the UI, they do not update automatically. I either need to use setState, or the changes become visible only after scrolling or when the widget's lifecycle is updated.

here is UI code

Observer( builder: (_) { final selectedCountryCode = injector<AuthStore>().selectedCountryCode; int selectedCountryIndexInt = injector<AuthStore>().selectedCountryIndexInt; return RippleEffect( onTap: () { injector<AuthStore>() .setSelectedCountryIndex(selectedCountryIndexInt + 1); }, child: Text( "$selectedCountryCode \\ $selectedCountryIndexInt", ), ); }, ),

here is package details

build_runner: 2.4.10
mobx_codegen: 2.7.0
mobx: 2.5.0
flutter_mobx: 2.3.0