I can use an IntersectionObserver to lazy-load images like so:

<template>
  <div id="gallery" class="gallery">
    <div class="gallery-card">
      <a href="#"><img src="../../images/1.jpg"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/2.jpg"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/3.jpg"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/4.jpg"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/5.jpg"></a>
      <a href="#"><img src="../../images/ph.png" data-src="../../images/6.jpg"></a>
    </div>
  </div>
</template>


<script setup>
import {onMounted} from "vue";

onMounted(() => {
    let config = {
        rootMargin: '0px 0px 50px 0px',
        threshold: 0
    };

    const observer = new IntersectionObserver(function(entries, self) {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                const img = entry.target
                img.src = img.dataset.src
                self.unobserve(img);
            }
        });
    }, config);

    const lazyImages = document.querySelectorAll('[data-src]');
    lazyImages.forEach(img => {
        observer.observe(img);
    });
})

</script>

but when I try to observe elements, generated with the v-for directive, the observer isn't able to read the rendered elements. I assume that the observer runs before the elements are rendered.

How do I apply the IntersectionObserver to elements generated in the v-for directive like:

<template>
  <div id="gallery" class="gallery">
    <div v-for="row in imageTable" class="gallery-card">
      <a href="#gallery-view"><img :src="'../../images/ph.png'" :data-src="'/storage' + row['path']"></a>
    </div>
  </div>
</template>