How to use the mobx.autorun function in mobx

function tests(model) {
    const viewModel = utils.createViewModel(model)
    let tr
    let vr
    // original rendering
    const d1 = mobx.autorun(() => {
        tr =
            model.title +
            ":" +
            model.done +
            ",interested:" +
            model.usersInterested.slice().toString() +
            ",unobservedProp:" +
            model.unobservedProp +
            ",usersCount:" +
            model.usersCount
    })
    // view model rendering
    const d2 = mobx.autorun(() => {
        vr =
            viewModel.title +
            ":" +

public setupTouchBar() {
    // First, the welcome
    this.setWelcomeItems();

    // Then, go with the intro
    setTimeout(() => {
      this.setDefaultItems();
    }, 4000);

    autorun(this.updateStartStopBtn);
    autorun(this.updateVersionSelectorItems);
    autorun(this.updateVersionButton);
  }

} else if (payload.adminOTP) {
      const adminToken = await this.gqlClient.initializeAdminToken(payload.adminOTP);
      ipcRenderer.send('save-admin-token', adminToken);
    }

    this.apiVersion = await this.gqlClient.getAPIVersion();

    const storeDefaultPlugins = this.diskStore.get('defaultPlugins') as Array<{ name: string, url: string }>;
    for (const { name, url } of storeDefaultPlugins) {
      await this.addPlugin('default', name, url);
    }

    this.switchToNewStream = this.diskStore.get('switchToNewStream') as boolean;
    this.savedSessions = String(this.diskStore.get('savedSessions'));

    this.autoSaveDispose = autorun(() => {
      const plugins = Array.from(this.defaultPlugins.values()).map((plugin) => ({
        name: plugin.name,
        url: plugin.url,
      }));
      this.diskStore.set('defaultPlugins', plugins);
      this.diskStore.set('switchToNewStream', this.switchToNewStream);
      this.diskStore.set('savedSessions', this.sanitizedSavedSessions);
    });

    this.timeUpdateTimeout = setInterval(() => {
      this.streams.forEach((stream) => stream.updateDisplayStartTime());
    }, 60000);

    this.subscription = await this.addStreamListeners(
      action(async (streamID: number) => {
        // tslint:disable-next-line: no-console

});

			const message =
				typeof m.payload === 'object' && typeof (m.payload as any).message === 'string'
					? (m.payload as any).message
					: '';

			Sentry.withScope(scope => {
				scope.setTag('report-type', 'user-report');
				scope.setLevel(Sentry.Severity.Error);
				scope.setExtra('report', JSON.stringify(m.payload));
				Sentry.captureMessage(`User report: ${message}`);
			});
		});

		Mobx.autorun(async () => {
			server.sender.send({
				type: MT.ProjectRecordsChanged,
				id: uuid.v4(),
				payload: {
					projects: await this.server.dataHost.getProjects()
				}
			});
		});

		// Open the splash screen when starting without file
		if (!opts || !opts.filePath) {
			await host.createWindow({
				address: server.location.origin,
				variant: HostWindowVariant.Splashscreen
			});
		} else {

componentDidMount() {
        this.dispose = autorun(() => {
            if (!this.editorData)
                runInAction(() =>
                    this.props.editor.loadNamespace(this.currentNamespace.name)
                )
        })

        this.chosenVariables = this.props.slot.dimensionsWithData.map(d => ({
            name: d.displayName,
            id: d.variableId,
            datasetName: "",
            searchKey: ""
        }))
    }

componentDidMount() {
            if (super.componentDidMount) {
                super.componentDidMount();
            }

            const {router} = this.props;

            const toolbarDisposer = autorun(() => {
                const toolbarConfig = toolbar.call(this);
                toolbarStorePool.setToolbarConfig(toolbarStoreKey, toolbarConfig);
                log.info(
                    (WithToolbarComponent.displayName || '') + ' configured toolbar "' + toolbarStoreKey + '"',
                    toolbarConfig
                );
            });

            this.updateRouteHookDisposer = router.addUpdateRouteHook((newRoute, newAttributes) => {
                const {attributes: oldAttributes, route: oldRoute} = router;
                if (getViewKeyFromRoute(newRoute, newAttributes) !== getViewKeyFromRoute(oldRoute, oldAttributes)) {
                    toolbarDisposer();
                }

                return true;
            }, UPDATE_ROUTE_HOOK_PRIORITY);

async componentDidMount() {
        await this.fetchRoutes();
        this.props.routePathStore!.clear();
        this.props.searchStore!.setSearchInput('');

        autorun(() => this.centerMapToRoutes());
    }

componentDidMount() {
        autorun(() => this.updateComponent(templatesStore.getTemplates));
    }

autoDetect(view: EmbeddedViewRef) {
    this.dispose = autorun(
      () => view.detectChanges(),
    );
  }

autorun(function runOnAddressChange() {
      addressStore.resetAddressTransactionAssets(state.addressTxAssetsTable.address);
      addressStore.fetchAddress(state.addressTxAssetsTable.address);
    });

    autorun(function fetchAddressTxAssetsOnChange() {
      if (state.addressTxAssetsTable.address) {
        addressStore.fetchAddressTransactionAssets(state.addressTxAssetsTable.address, {
          page: state.addressTxAssetsTable.curPage,
          pageSize: state.addressTxAssetsTable.pageSize,
        });
      }
    });

    autorun(function fetchAddressTxsOnChange() {
      if (state.addressTxsTable.address) {
        addressStore.loadAddressTransactions(state.addressTxsTable.address, {
          page: state.addressTxsTable.curPage,
          pageSize: state.addressTxsTable.pageSize,
        });
      }
    });

    autorun(function fetchContractsOnChange() {
      if (
        state.contractsTable.curPage * state.contractsTable.pageSize <
        contractStore.contractsCount
      ) {
        contractStore.loadContracts({
          page: state.contractsTable.curPage,
          pageSize: state.contractsTable.pageSize,