How to populate Combobox Options with async data?

[nolawnchairs]

Your docs only use an example of static data to populate the combo box, but I think the more relevant use case is to load async data to populate the options, otherwise ListBox is appropriate.

The options here are not updating with my searchResults ref. How to make it change based on the dataset?

<script setup lang="ts">

import type { AbridgedChannel } from '@/types'
import { defineEmits, ref } from 'vue'
import { SelectorIcon } from '@heroicons/vue/solid'
import {
  Combobox,
  ComboboxButton,
  ComboboxInput,
  ComboboxOption,
  ComboboxOptions,
} from '@headlessui/vue'
import { debouncedWatch } from '@vueuse/core'
import { ApiRequest } from '@/api/api'

defineEmits<{
  (e: 'select', channel: AbridgedChannel): void
}>()

const query = ref('')
const searchResults = ref<AbridgedChannel[]>([])

debouncedWatch(query, async (search) => {
  if (!search.length) {
    searchResults.value = []
    return
  }
  const response = await new ApiRequest<AbridgedChannel[]>().get('/channels', { search })
    .catch((e) => console.error(e))
  if (response) {
    searchResults.value = response
  }
}, { debounce: 500 })

</script>

<template>
  <Combobox as="div" class="col-span-6 sm:col-span-4">
    <div class="relative mt-1">
      <ComboboxInput
        class="w-full py-2 pl-3 pr-10 bg-white border border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
        @change="query = $event.target.value" :displayValue="(channel: any) => channel.title" />
      <ComboboxButton class="absolute inset-y-0 right-0 flex items-center px-2 rounded-r-md focus:outline-none">
        <SelectorIcon class="w-5 h-5 text-gray-400" aria-hidden="true" />
      </ComboboxButton>
      <ComboboxOptions v-show="searchResults.length"
        class="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
        <ComboboxOption v-for="channel in searchResults" :key="channel.id" :value="channel" as="template">
          <li @click="$emit('select', channel)">
            {{ channel.title }}
          </li>
        </ComboboxOption>
      </ComboboxOptions>
    </div>
  </Combobox>
</template>