A multi-select combobox in an invalid state

<script setup lang="ts">
import { ref } from "vue"
import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue, useComboboxAnchor } from "@/components/ui/combobox"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
const anchor = useComboboxAnchor()
const selected = ref<string[]>([frameworks[0]!, frameworks[1]!])

function handleRemove(value: string) {
  selected.value = selected.value.filter((v) => v !== value)
}
</script>

<template>
  <Field class="max-w-xs" data-invalid="true">
    <FieldLabel for="combobox-multiple-invalid">Frameworks</FieldLabel>
    <Combobox
      multiple
      :model-value="selected"
      @update:model-value="(v) => (selected = v as unknown as string[])"
    >
      <ComboboxChips>
        <ComboboxValue v-slot="{ value }">
          <ComboboxChip
            v-for="v in (value as string[]) ?? []"
            :key="v"
            :show-remove="true"
            @remove="handleRemove(v)"
          >
            {{ v }}
          </ComboboxChip>
          <ComboboxChipsInput
            id="combobox-multiple-invalid"
            placeholder="Select frameworks..."
            aria-invalid="true"
          />
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxContent :anchor="anchor">
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
    <FieldError :errors="[{ message: 'This field is required.' }]" />
  </Field>
</template>