javascript - Vue 3 を使用して静的コンポーネントに基づいて再利用可能なコンポーネントを作成するにはどうすればよいですか?

Question

最近、Vue 3 とヘッドレス UI を使い始めました。

リストを表示するために使用され、意図したとおりに機能するListBoxコンポーネントを作成しました。と の両方のリストを表示するための再利用可能なコンポーネントに変えたいと考えています。App.vuePeople
PeopleCountries

コンポーネントを両方のタイプで動的に変更するにはどうすればよいですか?

ListBox.vue

<template>

    <Listbox v-model="selectedPerson">

        <ListboxButton class=" bg-white shadow-sm border-gray-500 border-2 shadow-gray-200 font-bold p-4 text-left rounded-md">
            {{ selectedPerson.name }}
        </ListboxButton>

        <ListboxOptions class="mt-2">

            <ListboxOption
                as="template" v-slot="{ active }"
                v-for="person in people" :key="person"
                :value="person">
                <li :class="{
                    'bg-blue-500 text-white p-6': active,
                    'bg-white shadow-lg p-6 text-black ': !active
                }">
                    {{ person.name }}
                </li>
            </ListboxOption>

        </ListboxOptions>

    </Listbox>

</template>

<script setup>
    import { ref } from 'vue'
    import {
        Listbox,
        ListboxLabel,
        ListboxButton,
        ListboxOptions,
        ListboxOption,
    } from '@headlessui/vue'

    const people = [
        { id: 1, name: 'Durward Reynolds' },
        { id: 2, name: 'Kenton Towne' },
        { id: 3, name: 'Therese Wunsch' },
        { id: 4, name: 'Benedict Kessler' },
        { id: 5, name: 'Katelyn Rohan' },
    ]
    const selectedPerson = ref(people[0])
</script>

App.vue:

<template>
    <ListBox />
</template>