A multi-select with chips that cannot be removed

<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 } from "@/components/ui/field"

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

<template>
  <Field class="max-w-xs">
    <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="false">
            {{ v }}
          </ComboboxChip>
          <ComboboxChipsInput placeholder="Select frameworks..." />
        </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>
  </Field>
</template>