From 910814ae181a2fa27bdb10a00db5e5ac125d1489 Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Mon, 1 Jul 2024 16:38:03 +0800
Subject: [PATCH] docs: warn about ref unwrapping when auto-importing `ref`s
 (#27933)

---
 docs/2.guide/1.concepts/1.auto-imports.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md
index a7e24cd843..9e8c5263a6 100644
--- a/docs/2.guide/1.concepts/1.auto-imports.md
+++ b/docs/2.guide/1.concepts/1.auto-imports.md
@@ -105,6 +105,11 @@ Nuxt directly auto-imports files created in defined directories:
 
 :link-example{to="/docs/examples/features/auto-imports"}
 
+::warning
+**Auto-imported `ref` and `computed` won't be unwrapped in a component `<template>`.** :br
+This is due to how Vue works with refs that aren't top-level to the template. You can read more about it [in the Vue documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates).
+::
+
 ### Explicit Imports
 
 Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed: