How do I create a reusable component based on a static component using Vue 3

Question

I have recently started with Vue 3 and Headless UI.

I have created a ListBox component which is used in App.vue to show a list of People and is working as intended.
I am looking to turn it into a reusable component for showing lists of both People and Countries.

How can I change my component to be dynamic for both types?

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>

Answer 1

You would need to accept both the list of items to show and the currently selected item or list index as props on the component.
The below is an example, coded on-the-fly and not tested, but should give you a clear idea of what to try and how to proceed.

Also I'd rename the component to avoid confusion with the Listbox component you're using from Headless UI.

App.vue

<template>
   <ItemList :items='people' :selected-index='0' />
   <ItemList :items='countries' :selected-index='0' />
</template>

<script>
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 countries = [
    { id: 1, name: 'Italy' },
    { id: 2, name: 'Switzerland' },
    { id: 3, name: 'Austria' },
    { id: 4, name: 'Germany' },
]
</script>

ItemList.vue

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

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

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

const props = defineProps({
    items: Array,
    selectedIndex: Number,
})

const selectedItem = ref(null)

onMounted(() => {
    if(items && selectedIndex >= 0 && selectedIndex < items.length) {
        selectedItem.value = items[selectedIndex]
    }
})
</script>