DataTable warning [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes

[adam_a74]

Hi,

I am getting the following warning in the browser console (Chrome and Edge - not tested on FireFox):
runtime-core.esm-bundler.js:38
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

I am using

<template>
<DataTable :value="table.rows" ref="dt" :lazy="true" :paginator="true"
:rows="Constants.PAGINATION_DEFAULT_ROWS_PER_PAGE" dataKey="visitor" :totalRecords="table.totalRecords"
:loading="table.loading" @page="onPageFilterSort($event)" @sort="onPageFilterSort($event)"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:currentPageReportTemplate="`${$t('paginator_showing')} {first} ${$t('paginator_to')} {last} ${$t('paginator_of')} {totalRecords}`"
:rowsPerPageOptions="table.pageOptions" responsiveLayout="stack" :reorderableColumns="true"
v-model:filters="table.lazyParams.filters" filterDisplay="menu" @filter="onPageFilterSort($event)"
v-model:selection="table.selectedRows" class="p-datatable-sm">
... [omitted for brevity]
</DataTable >
</template>

<script setup lang="ts">
const dt = ref();

const exportCSV = () => {
dt.value.exportCSV();
};

... [omitted for brevity]
</script>

In dev (localhost), there is no warning in the console - but built for staging/production the error suddenly shows (3 times, even though there is only ONE datatable on the page).

Please advise how to remove the warning - how can I set the ref owner-context?
Thanks

[adam_a74]

Hi,

It turns out that the issue was that I had ref attribute on all of the columns - once I removed those refs (which were not necessary anyway), the problems went away.