mounted() {
  //Цепляем его на таблицу с overflow: auto
  //Требуемая видимость элемента для триггера: 10%
  this.observer = new IntersectionObserver(this.handleObserve, { root: this.$refs.table as any, threshold: 0.1 });
  //Почему нельзя повесить observe на все нужные элементы? Ну ладно
  for (const element of Array.from(document.querySelectorAll('#intersectionElement'))) {
    this.observer.observe(element);
  }
},

async handleObserve(entries: IntersectionObserverEntry[]) {
    const parsedEntries = entries.map(entry => {
      const target = entry.target as HTMLElement;
      //Предварительно задали data-атрибуты
      const project = +(target.dataset.projectId || '0');
      const speciality = +(target.dataset.specialityId || '0');
      return {
          isIntersecting: entry.isIntersecting,
          project,
          speciality,
      };
    });
    //Чтобы точно было реактивно
    this.$set(this, 'observing', [
      //Не добавляем дубликаты
      ...parsedEntries.filter(x => x.isIntersecting && !this.observing.some(y => y.project === x.project && y.speciality === x.speciality)),
      //Убираем пропавшие
      ...this.observing.filter(entry => !parsedEntries.some(x => !x.isIntersecting && x.project === entry.project && x.speciality === entry.speciality)),
     ]);
    //Иначе функция стриггерится несколько раз
     Array.from(document.querySelectorAll('#intersectionElement')).forEach((target) => this.observer?.unobserve(target));
     //Даем Vuetify перерендериться
    await this.$nextTick();
    //Ждем 300мс, чтобы не триггернуть лишний раз, отрисовка тоже грузит браузер
     await new Promise((resolve) => setTimeout(resolve, 500));
     //Вновь обсервим элементы
     Array.from(document.querySelectorAll('#intersectionElement'))
          .forEach((target) => this.observer?.observe(target));
},

<template #[`item.speciality-${speciality.id}`]="{item, headers}" v-for="speciality in getSpecialities()">
  <div id="intersectionElement" :data-project-id="item.id" :data-speciality-id="speciality.id">
    <ranking-projects-table-item
      v-if="observing.some(
          x => x.project === item.id && x.speciality === speciality.id
      )"
      :speciality="speciality"
      :project="item"
    />
    <template v-else>
      Загрузка...
    </template>
  </div>
</template>

<v-data-table
  v-bind="getTableSettings()"
  v-once
  :items="projects"
  @update:expanded="$forceUpdate()">

<div class="ranking-table" :style="{
    '--projects-count': getSettings().projectsCount,
    '--specialities-count': getSettings().specialitiesCount,
    '--first-column-width': `${getSettings().firstColumnWidth}px`,
    '--others-columns-width': `${getSettings().othersColumnsWidth}px`,
    '--cell-width': `${getSettings().firstColumnWidth + getSettings().othersColumnsWidth * getSettings().specialitiesCount}px`,
    '--item-height': `${getSettings().itemHeight}px`
  }">

display: grid;
grid-template-columns:
  var(--first-column-width)
  repeat(var(--specialities-count), var(--others-columns-width));

.ranking-table_v2__scroll::v-deep {
  .v-virtual-scroll {
    &__container, &__item, .ranking-table_v2__project {
      width: var(--cell-width);
    }
  }
}

<v-virtual-scroll
  class="ranking-table_v2__scroll"
  :height="getSettings().commonHeight"
  :item-height="getSettings().itemHeight"
  :items="projects">
    <template #default="{item}">
      <div class="ranking-table_v2__project" :key="item.id">
        <!-- ... -->

<v-lazy class="ranking-table_v2__item ranking-table_v2__item--speciality"
  v-for="(speciality, index) in specialities"
  :key="speciality.id">
   <!-- Колонка в строке таблицы -->
</v-lazy>