How to initialise TabController in a model when using Mobx State Management and MVVM architecture

Question

This is the model class

import 'dart:async';

import 'package:cali_clinic/helpers/app_exports/app_exports.dart';
import 'package:mobx/mobx.dart';

import '../../../app_nav_setup/app_nav_event.dart';
part 'profile_screen_model.g.dart';

class ProfileScreenModel = _ProfileScreenModelBase with _$ProfileScreenModel;



abstract class _ProfileScreenModelBase with Store {
// 'TickerProviderStateMixin<StatefulWidget>' can't be mixed onto 'Object' because 'Object' doesn't implement 'State<StatefulWidget>'


  final TabController _tabController = TabController(length: 6, vsync: this, );

  final StreamController<AppNavEvent> navEvent = StreamController();

  @observable
  bool isLoading = false;

  @observable
  bool isInternetError = false;


}

This is my ViewModel

import '../../../app_nav_setup/app_nav_event.dart';
import '../../../app_nav_setup/app_nav_setup.dart';
import '../model/profile_screen_model.dart';

class ProfileScreenVM extends ProfileScreenModel {
  
  Future<void> editProfile() async {
    // fetch User login form details from secure storage

    navEvent.add(
      AppNavEvent(
        null,
        routePath: AppNavSetup.editProfileRouteName.getRoutePath(),
        type: NavType.pushReplacement,
      ),
    );
  }
}