Why the props in a Child component are empty in Quasar, Vue 3 app?

Question

I'm passing props to a Child component table in Quasar vue3 app as a row in a table, but the content isn't rendered, I wonder why? And the console is clear. In a parent component I'm defining an object with keys and values, and trying to pass it as a prop to a child component, then render it. I'm toggling the modal window in a parent component with a button.

    // Child component

    const props = defineProps({
        airCraft: {
          required: true
        }
      })
      const rows = [props.airCraft]
      
      <template>
      <q-dialog >
          <q-card>
            <q-card-section>
              <q-table
                title="name"
                :rows="rows"
                :columns="columns"
                row-key="name"
                :hide-bottom="rows.length > 0"
                flat bordered
                >
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="id" :props="props">
                      {{ props.row.id }}
                    </q-td>
                <template>
              <q-table>
          <q-card-section>
        <q-card>
      <q-dialog >        
      <template>
      
      // Parent component
     <script>
     let airCraft = {
      id: '1',
      name: 'name'
     }
     <script setup>
import {ref} from 'vue' 
let fixed = ref(true)
     <template>
        <ModalAircraft v-model="fixed" :airCraft="airCraft" @click='fixed = true'/>
      <template>

Answer 1

I think it because you didn't activate your q-dialog, you should change your ModalAircraft like this

<template>
  <div>
    <q-btn label="Click" @click="modal = true" />
    <q-dialog v-model="modal">
      <q-card>
        <q-card-section>
          <q-table
            title="name"
            :rows="rows"
            :columns="columns"
            row-key="name"
            :hide-bottom="rows.length > 0"
            flat
            bordered
          >
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="id" :props="props">
                  {{ props.row.id }}
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  airCraft: {
    required: true,
  },
});

const rows = [props.airCraft];

const modal = ref(false);
</script>

I've added a q-btn to switch modal to true when clicked. Then, bind modal to q-dialog. You'll see a button when after component is rendered. After clicking that button, a dialog popup and you'll se your table

Code is here: https://stackblitz.com/edit/stackblitz-starters-icrnbz