I’ll try Stackblitz, but it can be difficult to parse out only what’s important and can go out.

In the meantime, I’ll try sending a piece of code to see if that helps.

....

onMounted(() => {
  window.addEventListener('resize', updateWindowHeight);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateWindowHeight);
});

</script>

<template>
  <info-panel />
  <p class="card mycard">
    <Tabs :value="selectedTab" scrollable @update:value="change">
      <TabList>
        <Tab :class="tabClasses" v-for="tab in tabs" :key="tab.title" :value="tab.value">
          {{ tab.title }}
        </Tab>
      </TabList>
      <TabPanels style="padding-left:0px; padding-top:6px; padding-bottom:0px; padding-right:0px">
        <TabPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
          <p class="m-0">
            <CustomersList v-model:tabIndex="tab.value" :windowHeight="windowHeight" />
          </p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  </p>

</template>

and in component CustomersList is:

....

onBeforeMount(() => {
  const username = localStorage.getItem('username');
  loading.value = true; // calling 4 times (every tab)
  ApiPost('get-firms', {what_firms: tabIndex.value, username: username}).then((data) => (customers.value = data, loading.value = false));  
})

</script>

<template>

  <div v-if="loading">
    <Skeleton v-for="n in skeletonCount" :key="n" class = "mt-3" :height="skeletonHeight + 'px'" />
  </div>

  <DataTable v-else v-on:filter="onFilter" v-model:filters="filters" :value="customers" removableSort scrollable :scrollHeight="windowHeight + 'px'" v-model:selection="selectedCustomer" selectionMode="single" contextMenu v-model:contextMenuSelection="selectedCustomer" filterDisplay="row"
          @rowContextmenu="onRowContextMenu" @rowUnselect="onRowUnselect" @row-dblclick="onRowDoubleClick" tableStyle="min-width: 50rem" :metaKeySelection="true"
          :virtualScrollerOptions="{ itemSize: 30 }" stateStorage="local" :stateKey="'dt-state-v01-' + tabIndex" >

    <Column field="f_name" header="Citty" sortable frozen class="font-bold">
      <template #body="{ field, data }">
        <div :class="'text-gray-500 dark:text-gray-300'">
          <div class="column-name"> {{ data[field] }} </div>
        </div>
      </template>
      <template #filter="{ filterModel, filterCallback }">
        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="look" class="column-name" />
      </template>
    </Column>
....

virtualScrollerOptions is causing an error. I even found that when I scroll through the list, some items are skipped – the list jumps further