Vue Combobox Headless UI how to reset?

I have a component, I took it from the templates and did not change it in any way.
I am just trying to add a button to clear the selected element.

My clearSelection function does not work, although the values ​​in the variables are cleared
Unfortunately, chatgpt also could not help and did not find anything on the Internet, has anyone encountered this?

<script setup>
import { computed, ref } from 'vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
import {
    Combobox,
    ComboboxButton,
    ComboboxInput,
    ComboboxLabel,
    ComboboxOption,
    ComboboxOptions,
} from '@headlessui/vue'

const props = defineProps({
    label: String,
    name: String,
    data: Object
});

const query = ref('')
const selectedItem = ref(null)
const filteredData = computed(() =>
    query.value === ''
        ? props.data
        : props.data.filter((item) => {
            return item.name.toLowerCase().includes(query.value.toLowerCase())
        })
)
const clearSelection = () => {
    query.value = '';
    selectedItem.value = null;
};
</script>

<template>
    <Combobox as="div" v-model="selectedItem" @update:modelValue="query = ''" nullable>
        <div class="flex justify-between">
            <ComboboxLabel class="block text-sm font-medium leading-6 text-gray-900">{{ props.label }}</ComboboxLabel>
            <span @click="clearSelection" class="cursor-pointer text-sm text-gray-900 translate-y-0.5px">Clear</span>
        </div>
        <div class="relative mt-2">
            <ComboboxInput :name="props.name" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
                           @change="query = $event.target.value"
                           @blur="query = ''" :display-value="(item) => item?.name"
            />
            <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
            </ComboboxButton>

            <ComboboxOptions v-if="filteredData.length > 0" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                <ComboboxOption v-for="item in filteredData" :key="item.id" :value="item" as="template" v-slot="{ active, selected }">
                    <li :class="['relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-blue-600 text-white' : 'text-gray-900']">
                        <span :class="['block truncate', selected && 'font-semibold']">
                          {{ item.name }}
                        </span>

                        <span v-if="selected" :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-blue-600']">
                            <CheckIcon class="h-5 w-5" aria-hidden="true" />
                        </span>
                    </li>
                </ComboboxOption>
            </ComboboxOptions>
        </div>
    </Combobox>
</template>

I want the field with the selected element to be cleared after clicking the button. I found the nullable property, but it allows you to simply erase the text. You can’t clear it through the button.