He estado tratando de hacer que aparezca una tabla de datos dinámica consultando la documentación de Prime Vue DataTable usando la API de composición. No tengo problemas con la tabla de datos básica usando la API de composición y opciones y parece que cada vez que intento hacer que la tabla de datos sea dinámica usando v-for la tabla de datos no aparecerá.

Además, según tengo entendido, PrimeVue DataTable no tiene restricciones sobre cómo se proporcionan los datos en la Documentación de inicio de DataTable.

¿Alguien puede decirme qué está mal? Gracias por adelantado. Cualquier ayuda es apreciada.

Aquí está el código en DynamicTable.vue

 <template> <div> <DataTable :value="cars"> <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" ></Column> </DataTable> </div> </template> <script> import { onMounted, ref } from "vue"; export default { setup() { onMounted(() => { cars.value = [ { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" }, { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" }, { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" }, ]; }); const columns = ref([ { field: "vin", header: "VIN" }, { field: "year", header: "Year" }, { field: "color", header: "Color" }, { field: "brand", header: "Brand" }, ]); const cars = ref([]); return { columns, cars }; }, }; </script> <style></style>