nuxt vue3 primevue autocomplete issue

In a vue component I have a autocomplete dropdown:

import AutoComplete from 'primevue/autocomplete';

defined in the template as follows:

<AutoComplete
    id="account"
    v-model="activity.account"
    :invalid="inputErrors['account']"
    :suggestions="filteredAccounts"
    class="w-full"
    dropdown
    field="name"
    forceSelection
    optionLabel="label"
    optionValue="accountID"
    placeholder="Search"
    @change="clearValidationProperty('account')"
    @complete="search"
/>

The trouble is that the account name needs more detail, i.e. to display city and state in addition to the account name, so to use a computed field instead of the name. Here is the new computed field:

const accountsWithLabel = computed(() => {
  return accounts.value.map(account => ({
    ...account,
    label: `${account?.name || ''} - ${account?.city ? account.city : ''}, ${account?.state ? account.state : ''}`.trim()
  }));
});

and the search function that uses accountsWithLabel.value:

function search(event: { query: string }) {
  setTimeout(() => {
    if (!event.query.trim().length) {
      filteredAccounts.value = [...accountsWithLabel.value];
    } else {
      filteredAccounts.value = accountsWithLabel.value.filter((account) => {
        const searchableFields: string[] = [
          account?.name || "",
          account?.address || "",
          account?.email || "",
          account?.phone || "",
          account?.territory || ""
        ];
        return searchableFields.some((field: string) => {
          return field.toLowerCase().includes(event.query.toLowerCase());
        });
      });
    }
  }, 250);
}

With this change, the dropdown is very slow and looks like this:

How to fix it?