Nuxt UI Pro : Custom component Maximum recursive updates exceeded

<script setup lang="ts">
interface Props {
  endpoint: string
  placeholder?: string
  searchable_attributes?: string | string[]
}

const {
  endpoint,
  placeholder,
  searchable_attributes = 'name'
} = defineProps<Props>()

const { get } = useApi(endpoint)
const loading = ref(false)
const selected = ref([])
const emit = defineEmits(['update:modelValue'])

const search = async (q: string) => {
  if (loading.value) return

  loading.value = true

  const items: any[] = await get(null, { q })

  loading.value = false

  return 'data' in items ? items.data : items
}
</script>

<template>
  <USelectMenu
    v-model="selected"
    class="w-32"
    :loading
    :searchable="search"
    searchable-placeholder="Rechercher..."
    :placeholder="placeholder ?? 'Sélectionner'"
    :option-attribute="searchable_attributes"
    multiple
    trailing
    by="id"
    :searchable-lazy="true"
    @change="emit('update:modelValue', selected)"
  >
    <template #label>
      <span
        v-if="selected.length"
        class="truncate"
      >
        {{ placeholder }}: {{ selected.length }}
      </span>
    </template>
  </USelectMenu>
</template>

const filters = computed(() => ({
  levels: levels.value.map(level => level.name).join(',')
}))

const debouncedFilters = useDebounce(filters, 300)

const { data } = await useAsyncData(
  'lessons',
  () =>
    get(null, {
      ...(debouncedFilters.value.levels && { level: debouncedFilters.value.levels })
    }),
  {
    watch: [debouncedFilters]
  }
)

<CommonsSelectMenu @update:model-value="levels = $event" endpoint="levels" placeholder="Niveaux" />