LazyLoadImage.vue

<template>
  <div class="container">
    <img v-if="isOnScreen" width="25%" :src="src" @load="loaded">
  </div>
</template>

<script>
import { useOnScreen } from "../hooks/screen";
import { useLazyLoad } from "../hooks/lazyLoad";

export default {
  setup() {
    const { isOnScreen } = useLazyLoad(useOnScreen());
    return {
      isOnScreen
    };
  },

  name: "LazyLoadImage",

  props: {
    src: {
      type: String,
      default: "https://lorempixel.com/400/200/"
    }
  },

  methods: {
    loaded() {
      console.log("lazy loaded");
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 10px;
}
</style>