Lazy Load background image in Vue

<script setup lang="ts">
import { useElementVisibility } from '@vueuse/core'
const target = ref(null)
const targetIsVisible = useElementVisibility(target)
</script>
 
<template lang="pug">
aside.CustomNewsletterSubscribe.debug.overflow-hidden(data-component="CustomNewsletterSubscribe" data-status="validate" aria-label="Subscribe to our newsletter" ref="target")
  section.relative.py-16(class="z-[1]")
  div.absolute.inset-0.bg-cover.bg-no-repeat.bg-fixed.block.bg-primary-500(class="z-[-10]" :style="targetIsVisible ? { backgroundImage: `url(/StadiumBackground.svg)` } : {}")
</templates>

This only renders the background image when the image is in the viewport.