Vuex dispatch running infinity when submit form using el-date-picker

Question

I'm a new of migrating from 2 to 3. But when I change date range some times, it will call function getRequestStatistics infinity. I don't know how to fix this. I hope anyone can help me. Thanks.

Here is my code include template and script.

export default defineComponent({
  name: "request-statistics",
  components: {
    Datatable,
  },
  setup() {
    const formSearchData = ref({
      username: '',
      dateRange: [moment().startOf("month").toDate(), new Date()],
    });
    let formData = toRaw(formSearchData.value);
    const tableHeader = ref([
      {
        name: "STT",
        key: "seq",
      },
      {
        name: "Tên",
        key: "clientUserName",
      },
      {
        name: "IP",
        key: "fromIP",
      },
      {
        name: "API URI",
        key: "apiUri",
      },
      {
        name: "Status code",
        key: "statusCode",
      },
      {
        name: "Message",
        key: "message",
      },
      {
        name: "3rd API URI",
        key: "thirtyServiceAPIURI",
      },
      {
        name: "Thời gian phản hồi 3rd",
        key: "thirtyResponseTime",
      },
    ]);
    const loading = ref<boolean>(false);
    let dataRequestStatistics = ref();
    let pagination = ref();

    // let dataRequestStatistics = ref([]);

    async function getRequestStatistics(username?: string, fromDate?: string, toDate?: string, page?: number, pageSize = 10) {
      console.log("call API")
      loading.value = true;
      await store.dispatch(Actions.GET_REQUEST_STATISTICS_ACTION, {
        params: {
          username: username ? username : '',
          fromDate: fromDate ? fromDate : moment().startOf('month').format('DD/MM/YYYY'),
          toDate: toDate ? toDate : moment().format('DD/MM/YYYY'),
          // fromDate: formData.fromDate,
          // toDate: formData.toDate,
          page: page,
          pageSize: pageSize,
        },
      });
      const requestStatisticsResponse = store.getters.requestStatisticsResponse;
      dataRequestStatistics.value = requestStatisticsResponse.data;
      pagination.value = {
        totalPages: requestStatisticsResponse.totalPages,
        pageNo: requestStatisticsResponse.pageNo,
        pageSize: requestStatisticsResponse.pageSize,
        totalCount: requestStatisticsResponse.totalCount,
        currentCount: requestStatisticsResponse.currentCount,
      };
      loading.value = false;
    }

    function submitSearch() {
      // getRequestStatistics();
      console.log(formData)
      getRequestStatistics(formData.username, formData.dateRange[0].toLocaleDateString('en-GB'), formData.dateRange[1].toLocaleDateString('en-GB'), 1);
    };

    function changePage(page) {
      // let formData = toRaw(formSearchData);
      getRequestStatistics(formData.username, formData.dateRange[0].toLocaleDateString('en-GB'), formData.dateRange[1].toLocaleDateString('en-GB'), page);
    }

    onBeforeMount(() => {
      getRequestStatistics(undefined, undefined, undefined, 1);
    });
    onMounted(() => {
      MenuComponent.reinitialization();
      setCurrentPageBreadcrumbs("Request Statistics", ["Apps", "Statistics"]);
    });
    return {
      dataRequestStatistics,
      pagination,
      tableHeader,
      changePage,
      formSearchData,
      submitSearch,
      loading,
    };
  },
});

<div class="card">
    <div class="card-header border-0 pt-6">
      <div class="card-title">
        <form class="form" autoComplete="on">
          <div class="row">
            <div
                class="col-md-3 d-flex align-items-center position-relative my-1"
            >
              <span class="svg-icon svg-icon-1 position-absolute ms-6">
                <inline-svg src="media/icons/duotune/general/gen021.svg"/>
              </span>
              <input
                  autoFocus
                  type="text"
                  class="form-control form-control-solid w-180px ps-15"
                  placeholder="Username"
                  v-model="formSearchData.username"
              />
            </div>
            <div
                class="col-md-6 d-flex align-items-center position-relative my-1"
            >
              <el-date-picker
                  class="form-control form-control-solid w-180px ps-15"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="Start date"
                  end-placeholder="End date"
                  format="DD/MM/YYYY"
                  v-model="formSearchData.dateRange"
                  :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
              />
            </div>
            <div
                class="col-md-3 d-flex align-items-center position-relative my-1"
            >
              <button @click="submitSearch" type="submit" class="btn btn-primary">
                <span class="indicator-label">Search</span>
                <span v-if="loading" class="indicator-progress"
                >Please wait...
                  <span
                      class="spinner-border spinner-border-sm align-middle ms-2"
                  ></span
                  ></span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="card-body pt-0">
      <Datatable
          v-if="dataRequestStatistics && pagination"
          :table-data="dataRequestStatistics"
          :table-header="tableHeader"
          :pagination="pagination"
          @change-page="changePage"
      >
        <template v-slot:cell-seq="{ row: reqs }">
          {{ reqs.seq }}
        </template>
        <template v-slot:cell-clientUserName="{ row: reqs }">
          {{ reqs.clientUserName }}
        </template>
        <template v-slot:cell-fromIP="{ row: reqs }">
          {{ reqs.fromIP }}
        </template>
        <template v-slot:cell-apiUri="{ row: reqs }">
          {{ reqs.apiUri }}
        </template>
        <template v-slot:cell-statusCode="{ row: reqs }">
          {{ reqs.statusCode }}
        </template>
        <template v-slot:cell-message="{ row: reqs }">
          {{ reqs.message }}
        </template>
        <template v-slot:cell-thirtyServiceAPIURI="{ row: reqs }">
          {{ reqs.thirtyServiceAPIURI }}
        </template>
        <template v-slot:cell-thirtyResponseTime="{ row: reqs }">
          {{ reqs.thirtyResponseTime }}
        </template>
      </Datatable>
    </div>
  </div>

here is my table