I've been trying to make a Dynamic DataTable appear by referring to Prime Vue DataTable Documention using the Composition API. I have no issues with the Basic DataTable using both Compositon and Options API and it seems that whenever I try to make the DataTable dynamic using v-forthe DataTable will not appear.

Also, from my understanding that PrimeVue DataTable does not have any restrictions on how the data is provided in the DataTable Getting Started Documentation.

Can someone tell me what is wrong? Thanks in advance. Any help is appreciated.

Here is code in 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>