PrimeVue 3 DataTable not reactive?

[chacs]

Code: Select all

<template>
    <DataTable :value="cars">
        <Column field="brand" header="Brand"></Column>
    </DataTable>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
import DataTable from "primevue/components/datatable/DataTable"
import Column from "primevue/components/column/Column"

const CARS = [
    {brand: "Audi"}
]

export default defineComponent({
    components: {
        DataTable, Column
    },
    setup() {
        return {
            cars: ref(CARS)
        }
    },
    mounted() {
        CARS.push({brand: "BMW"})
    }
})
</script>

The table shows 1 row (Audi) but didn't show the 2nd row (BMW)

Any help? Thanks.

[Eireternal]

I too am running into this issue. Anyone know how to resolve?

[ntgraph@yahoo.com]

Me too, I am under the impression Vue 3 reactive breaks lots of UI library and components, not only Prime Vue, as soon as the data is fetched (not from original data) then component is reactive

[ricombnation]

Reactive table data (value prop) would really be useful.