Lazy load images

[jasperf]

We currently have this single image component:

<template>
    <component v-bind:is="object.wrap" style="width: 100%; height: 100%;margin:0px;" class="image-wrapper">
    <div v-if="object.overlayColor" :style="{ backgroundColor: object.overlayColor }" class="image-overlay"></div>
        <a style="cursor:pointer;width:100%;height:100%;display:block;" v-if="object.linkToHome || object.href" @click="navigator">
            <img :src="src" :title="title" :alt="alt" :style="imageStyle"/>
        </a>
        <img v-else-if="src" :src="src" :title="title" :alt="alt" :style="imageStyle"/>
        <caption v-if="object.hasCaption" v-text="object.captionText" :style="object.captionStyleObject">Dit is een afbeelding</caption>
    </component>

</template>
<script>
    export default {

        data() {
            return {
                imageStyle: {}
            }
        },

        props: ['object', 'property'],
...
      computed: {
            title() {
                return this.object.title ? this.object.title : '';
            },

            alt() {
                return this.object.alt ? this.object.alt : '';
            },

            src() {
                return this.object.src ? this.object.src : '';
            }

        },
...

How would you use Vue Intersect to Lazy load images in a component like this? Would we use @enter to load the image source? We would also need to attach the image source so not sure how to combine @entry with :src="src". Using @enter="src()" does not load any source data so does not work..

N.B. Safari does support IntersectionObserver now https://caniuse.com/?search=IntersectionObserver