From 9347501932313b3d0223a73837eafbea7b3d9426 Mon Sep 17 00:00:00 2001
From: MeesterDev <thomasmeester121@gmail.com>
Date: Mon, 7 Apr 2025 19:38:41 +0200
Subject: [PATCH] Add reactivity information in Options API to Template Refs
 page

---
 src/guide/essentials/template-refs.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/guide/essentials/template-refs.md b/src/guide/essentials/template-refs.md
index c5b72ffb9e..bf41e099d2 100644
--- a/src/guide/essentials/template-refs.md
+++ b/src/guide/essentials/template-refs.md
@@ -346,3 +346,24 @@ export default {
 In the above example, a parent referencing this component via template ref will only be able to access `publicData` and `publicMethod`.
 
 </div>
+
+<div class="options-api">
+
+## Reactivity of Refs {#reactivity-of-refs}
+
+Note that `this.$refs` is not reactive. For a reactive ref, you can use `useTemplateRef`:
+
+```vue
+<script>
+export default {
+  setup() {
+    useTemplateRef('input')
+  }
+}
+</script>
+
+<template>
+  <input ref="input" />
+</template>
+```
+</div>