Vue.js Lazy-Load Images

LazyImage.vue

<template>
  <div :style="containerStyle" class="div-image-container">
    <transition name="fade">
      <img
        v-if="source !== ''"
        v-show="loaded"
        :height="height"
        :width="width"
        :src="source"
        alt="image"
        @load="onLoad"
      >
    </transition>
  </div>
</template>

<script>
export default {
  name: "LazyImage",
  components: {},
  props: {
    source: String,
    height: String,
    width: String
  },
  data: () => ({
    loaded: false
  }),
  computed: {
    containerStyle() {
      return {
        "--width": `${this.width}px`,
        "--height": `${this.height}px`
      };
    }
  },
  methods: {
    onLoad() {
      // console.log("IMAGE LOADED");
      this.loaded = true;
    }
  }
};
</script>

<style scoped lang="scss">
.div-image-container {
  width: var(--width);
  height: var(--height);
}
</style>