How do I set a ref on the underlying img element in NuxtImg?

I am trying to set a ref on the NuxtImg as I want to pass the image along to a shader component. I have tried this but it does not work:

<NuxtImg src="/thelogo.png" ref="thelogo" 
loading="lazy" format="webp" quality="100" 
sizes="50vw sm:60vw md:500px" densities="x1 x2"/>

When checking the img tag it has no ref named 'thelogo'. Am I missing something obvious?

This works:

const logoEl = useTemplateRef('thelogo')

onMounted(() => {
    console.log(logoEl.value?.$el)

})

</script>

<template>
    <div class="home-wrapper">
        <section class="logo" ref="logo">
            <!--<TheLogo class="logo__svg" :fontControlled="false" />-->
            <NuxtImg src="/thelogo.png" ref="thelogo" loading="lazy" format="webp" quality="100"
                sizes="50vw sm:60vw md:500px" densities="x1 x2" />
        </section>

        <section class="title">THOMAS<br>THORSTENSSON</section>
    </div>
</template>