fix(VDataTableVirtual): avoid scroll glitches with expanded rows

[J-Sek]

fixes #20457

related to: #22938

TODO:

• unslopify

Problem: The expanded <tr> was never measured, so sizes[index] under-counted and every scroll
offset above an expanded row was wrong

• introducing watch to measure the expanded row. It now renders inside its own VVirtualScrollItem
• correct index: measurements are keyed by virtualIndex (flat position)
• no double render: the expanded/expanded-row slots are omitted from VDataTableRows since they're now rendered — and measured — in the item slot.
• transition for the #expanded slot is preserved

The expanded-row slot stays conditionally rendered with the measurement ref attached automatically via cloneVNode, so we do not force users to attach itemRef passed via slot props.

Markup:

<template>
  <v-app theme="dark">
    <v-data-table-virtual
      :items="inventory"
      :headers="[{ title: 'ID', value: 'id' }]"
      fixed-header
      style="max-height: 85vh"
      show-expand
      :mobile="false"
      expand-on-click
      item-value="id"
    >
      <template #expanded="{ columns, item }">
        <div class="pa-4 bg-grey">
          <v-data-table
            :items="item.subArray"
            :headers="[{ title: 'Sub-ID', value: 'id' }]"
            dense
            class="elevation-5"
            :mobile="false"
          />
        </div>
      </template>
    </v-data-table-virtual>
  </v-app>
</template>

<script setup>
  const inventory = Array.from({ length: 200 }).map((_, i) => ({
    id: String(i).padStart(5, '0'),
    subArray: Array.from({ length: 10 }).map((_, sub) => ({
      id: `${String(i).padStart(5, '0')}-${String(sub).padStart(3, '0')}`,
    })),
  }))
</script>