Its possible to use q-timeline-entry inside q-intersection component?

I am trying to show a timeline using the timeline component, since the timeline is goint to be pretty big, I tried to use the intersection component so each timeline entry will only be in the DOM when “seen”, so I have something like this:

<div class="q-px-lg q-py-md">
  <q-timeline color="secondary">
    <!-- START: list -->
    <q-intersection
      v-for="item in allItems"
      :key="`item-${item.id}`"
      class="example-item"
    >
      <q-timeline-entry
        :title="item.product?.name"
        :subtitle="item.legend"
      >
        <div>
          {{ item.desc }}
        </div>
      </q-timeline-entry>
    </q-intersection>
    <!-- END: list -->
  </q-timeline>
</div>

I see the intersection component working, but the timeline doesnt have the connecting lines, its missing the q-timeline__dot::after CSS,
Am I missing something? should I use the directive instead and do the DOM add/remove with it?