我正在使用Tailwind的列表框组件。官方文档显示了react的onChange事件处理程序。我想用vue做类似的事情。
我试着将事件处理程序添加到Listbox组件中.
这就是我的组件的样子：

<script setup>
import { ref, onMounted } from 'vue'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'

const props = defineProps(['options', 'label', 'selected_option']);

function optionSearch(){
    let selected = props.options.filter(option=>{
        let index =  option.id.toString().indexOf(props.selected_user)
        return index > -1;
    })
    return ref(selected);
}
function getSelectedIndex(){
    var x;
    props.options.forEach(function(option, index){
        if(option.id == props.selected_option){
            x = index;
        }
    });
    return x;
}
const selectedIndex = getSelectedIndex();
const selected = ref(props.options[selectedIndex]);

onMounted(()=>{});
function optionChanged(){
    console.log('snap');
}

</script>
<template>

    <Listbox  as="div" v-model="selected" onChange="optionChanged">
        <ListboxLabel v-if="label" class="block text-sm font-medium leading-6 text-gray-900">Assigned to</ListboxLabel>
        <div class="relative mt-2">
            <ListboxButton class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                <span v-if="selected" class="block truncate">{{ selected.name }}</span>
                <span v-else class="block truncate">Select</span>
                <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                    <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
                </span>
            </ListboxButton>

            <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
                <ListboxOptions 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">
                    <ListboxOption as="template" value=""><li class="relative cursor-default select-none py-2 pl-3 pr-9"><span class="'block truncate">Select</span></li></ListboxOption>
                    <ListboxOption as="template" v-for="option in options" :key="option.id" :value="option" v-slot="{ active, selected }">
                        <li :class="[active ? 'bg-indigo-600 text-white' : 'text-gray-900', 'relative cursor-default select-none py-2 pl-3 pr-9']">
                            <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">{{ option.name }}</span>

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

</template>

当我使用一个简单的选择框时，一切都很好。

<select @change="optionChanged" name="location" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
<option>United States</option>
<option selected="">Canada</option>
<option>Mexico</option>
</select>

如何使用vuejs在tailwind listbox上查看事件更改？
谢谢.