why useTemplateRef() can not get element in onMounted hook, the value will be null

[DiHaozhe-365]

<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue'

onMounted(() => {
  const title = useTemplateRef('title')
  console.log(title.value) // null
  if (title.value) {
    console.log(title.value) // can not access this line
  }
})
</script>

<template>
    <h1 ref="title">Vue3.5</h1>
</template>

[Deckluhm]

You need to declare your template ref outside of the hook:

<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue'

const title = useTemplateRef('title')

onMounted(() => {
  console.log(title.value)
})
</script>

<template>
  <h1 ref="title">Vue3.5</h1>
</template>

[DiHaozhe-365]

Thx, it works!