我试图做一个自定义的子组件与props作为行数据，但有错误“rows.slice不是一个函数”，因为我检查父数据是一个对象，和props接收到的是相同的对象，但它不是可视化的。

//Parent component

<script setup>
  import DetailsFormComponent from '../components/DetailsFormComponent.vue'
  import { ref } from 'vue'
  
  const details = ref({
      id: '1',
      form_id_ts_in_db_ikar: '5',
      bord_nr_fs: '522',
      type_fs: 'plane',
      form_id_ts_from_db_ikar: '5',
      form_is_ts: '6',
      form_name_ts_in_db_ikar: 'Name string',
      development_lc: '10'
    })
</script>
<template>
  <form>
    <DetailsFormComponent :details="details"/>
  </form>
</template>

// Child component
<script setup>
import {ref} from 'vue'
  const props = defineProps({
      details: {
        required: true,
        type: Object
      }
    })

  const columns = [
    { name: 'calories', align: 'left', label: 'Calories', field: 'calories', sortable: true },
    { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
  ]
  
  const rows = props.details
  
  <template>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="name"
      />
  </div>
</template>

字符串