defineExpose not working as expected

Hello all,

In my component I have a script setup with defineExpose

This is in Nuxt 3

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch<ApiRes>(url)
defineExpose({ refresh })

</script>

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch<ApiRes>(url)
defineExpose({ refresh })

</script>

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch<ApiRes>(url)
defineExpose({ refresh })

</script>

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch<ApiRes>(url)
defineExpose({ refresh })

</script>

Parent component like this works

const myref = useTemplateRef('testRef')
myref.value.$.exposed.refresh()

</script>

const myref = useTemplateRef('testRef')
myref.value.$.exposed.refresh()

</script>

const myref = useTemplateRef('testRef')
myref.value.$.exposed.refresh()

</script>

const myref = useTemplateRef('testRef')
myref.value.$.exposed.refresh()

</script>

Parent component like this does not work

const myref = useTemplateRef('testRef')
myref.value.refresh()

</script>

const myref = useTemplateRef('testRef')
myref.value.refresh()

</script>

const myref = useTemplateRef('testRef')
myref.value.refresh()

</script>

const myref = useTemplateRef('testRef')
myref.value.refresh()

</script>

As far as I understood it should work without going deep into the object with the $ dollar sign.

Any ideas regarding this?