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>

You almost did what you want, only thing you need is props.
people and countries are instance of your child component DataTable.vue and you want to use them in a parent component App.vue.

DataTable.vue :

<template>
 <div id='data-table'> 
   {{table}}
 </div>
</template>
 
<script>
export default {
  .
  .
  .
 props: ['table']
}
</script>

App.vue:

<template>
   <data-table table='people' />
   <data-table table='countries' />
</template>

And also you have to Define the tables in outside the child component and then pass to the child , the better way to this is using state management like vuex