vue-vben-admin ApiSelect - updateSchema function does not update data options

I have 2 searchFormSchema, ApiSelect, including province and district

When I select a province, it listens to the onChange event and calls updateSchema to the district field. I have checked and found that the district field has successfully called the api but the data of the district ApiSelect is not updated.

Here is my code

Reproduction


import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import {RepositoryFactory} from "/@/api/sys/factory";
import {nextTick} from "vue";

export const columns: BasicColumn[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: 'Province',
    dataIndex: 'province.name',
    width: 180,
    customRender: ({ record }) => {
      return record.province.name;
    },
  },
  {
    title: 'District',
    dataIndex: 'district.name',
    width: 180,
    customRender: ({ record }) => {
      return record.district.name;
    },
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: 'Name',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'province',
    component: 'ApiSelect',
    label: 'Province',
    helpMessage: ['Select province to filter data'],
    colProps: {
      span: 8,
    },
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: RepositoryFactory.get('province').pagination,
        resultField: 'docs',
        labelField: 'name',
        valueField: '_id',
        placeholder: 'Province and city linkage',
        alwaysLoad: true,
        onChange: async (e: any) => {

          console.log('Province selected', e)

          formModel.district = undefined; //  reset district value

          const { updateSchema } = formActionType;
          await nextTick(() => {
            updateSchema({
              label: 'District',
              field: 'district',
              helpMessage: ['Select province first'],
              componentProps: {
                api: RepositoryFactory.get('district').pagination,
                params: {
                  province: e,
                },
                resultField: 'docs',
                labelField: 'name',
                valueField: '_id',
                alwaysLoad: true,
              },
            });
            // It only update other, it call api, but not update data return from api
          });
        },
      };
    },
  },
  {
    label: 'District',
    field: 'district',
    component: 'ApiSelect',
    componentProps: {
      api: RepositoryFactory.get('district').pagination,
      resultField: 'docs',
      labelField: 'name',
      valueField: '_id',
      onChange: (e) => {
        console.log('selected:', e);
      },
      // atfer request callback
      onOptionsChange: (options) => {
        console.log('get options', options.length, options);
      },
      afterFetch: (v) => {
        console.log('afterFetch get options', v);
        //do something
        return v;
      },
      alwaysLoad: true,
    },
    colProps: { span: 8 },
  },
];