How to render a table from a child component

[darkons]

Hi!

First of all, thanks for this awesome package. All is working like a charm with normal implementation but now my project has the following requirement:

// Edit Customer component (parent)
<script setup>
defineProps({
  customer: Object,
})
</script>

<template>
  <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
    <ContactsTable :contactable="customer" />
    <AddressesTable :addressable="customer" />
  </div>
</template>

// ContactsTable component (child)
<script setup>
defineProps({
  contactable: Object,
})

const contacts = ref(null)

onMounted(() => {
  // load customer contacts with axios
})
</script>

<template>
  <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
    <Table :resource="contacts">
  </div>
</template>

I know that I can render the tables directly in parent component but the child components have a lot of code in addition to the table, that's why I want them isolated. Is it possible to render the table directly from the child component?

Thank you for your time!

Note: I'm sorry if this is a stupid question but I've only been using inertia/vue for a short time.