let people = [
  { value: 'alice', name: 'alice' },
  { value: 'bob', name: 'bob' },
  { value: 'charlie', name: 'charlie' },
]

let Example = defineComponent({
  template: `
    <Combobox v-model="value">
      <ComboboxInput @change="setQuery" />
      <ComboboxButton>↕</ComboboxButton>
      <ComboboxOptions>
        <ComboboxOption
          v-for="person in filteredPeople"
          :key="person.value"
          :value="person.value"
        >
          {{ person.name }}
        </ComboboxOption>
      </ComboboxOptions>
    </Combobox>
  `,

  setup(props) {
    let value = ref(null)
    let query = ref('')

    let filteredPeople = computed(() => {
      return query.value === ''
        ? people
        : people.filter(person => person.name.toLowerCase().includes(query.value.toLowerCase()))
    })

    return {
      value,
      query,
      filteredPeople,
      setQuery: event => {
        query.value = event.target.value
      },
    }
  },
})