Issue: q-select Duplicating Options on Re-Render

[mozhgan-k]

I am experiencing an issue with where, after the component re-renders, the options array gets duplicated multiple times.

Expected Behavior:

• The q-select should display fetched options.
• When the user scrolls, new data is appended without duplication.

Actual Behavior:

• Initially, the options load correctly.
• When the component re-renders, the same options are pushed multiple times.
• Example: First render → 3 options
  • Second render → 9 options
  • Third render → 27 options (tripling each time)
• The issue is not caused by my function logic; I have ensured that duplicates are filtered out before updating the options.

Possible Cause:

I suspect this is related to how internally manages its options prop. It seems that even when I reset options.value = [] before fetching new data, Quasar keeps the old items.

Code Example:
Here is my component implementation:

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    multiple: boolean;
    autofocus: boolean;
    api: string;
    createdAutoLoadData: IAutoloadData;
    metaData: IMetaData | null | undefined;
    rules?: Array<any> | undefined;
    id?: string | undefined;
  }>(),
  {
    id: undefined,
    multiple: false,
    autofocus: false,
    rules: () => {
      return [];
    },
  },
);

const options = ref<ISelect[]>([]);
const page = ref(1);
const loading = ref(false);
const data = defineModel<ISelect | null | number | string | ISelect[]>(
  "selectValue",
);
const store = useAutoloadStore();
const [baseUrl, queryString] = props.api.split("?");
const routeParams = queryString
  ? Object.fromEntries(new URLSearchParams(queryString))
  : {};
const fetchOptions = async (params = {}) => {
  try {
    loading.value = true;
    const { data: response } = await useApiFetch<IOptionsResponse>(baseUrl, {
      params: { limit: 10, skip: page.value, ...routeParams, ...params },
    });

    if (response.value) {
      // Store in Pinia
      store.setData(props.createdAutoLoadData.key, response.value);
      // Only reset `options.value` if it's the first page (skip = 1)
      if (page.value === 1) {
        options.value = response.value.data; // Reset on first load
      } else {
        // Merge and remove duplicates based on `key`
        const existingKeys = new Set(options.value.map((item) => item.key));
        const newItems = response.value.data.filter(
          (item) => !existingKeys.has(item.key),
        );
        options.value = [...options.value, ...newItems];
      }
    }
  } catch (e) {
    console.error("Error fetching data:", (e as Error)?.message || e);
  } finally {
    loading.value = false;
  }
};

/** FILTER SELECT LIST DATA **/
const filterOptions = async (val: string, update: any) => {
  if (!val) {
    update(() => {
      options.value = props.createdAutoLoadData.data;
    });
    return;
  }

  update(async () => {
    await fetchOptions({ label: val });
  });
};

/** RUN AUTOLOAD PAGINATION **/
const loadData = async ({ direction, index, to }: any) => {
  if (direction === "increase" && to - index < 5 && props.metaData) {
    page.value++;
    await fetchOptions({ skip: page.value });
  }
};
</script>

<template>
  <q-select
    v-model="data"
    outlined
    :multiple="multiple"
    use-input
    dense
    :autofocus="autofocus"
    :rules="rules"
    :use-chips="multiple"
    :for="id"
    :options="options"
    :loading="loading"
    @filter="filterOptions"
    @virtual-scroll="loadData"
  >
    <template #no-option>
      <q-item>
        <q-item-section class="text-grey">
          {{ $t("general.noResult") }}
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template> 

Has anyone else encountered this issue? Is there a recommended way to fully reset q-select options when the component re-renders?