From ae3e4b1c706b8d61a4a312ca5d23441df021b4b4 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 6 Dec 2023 16:38:16 +0800
Subject: [PATCH] fix(utils): unwrap refs when stringifying values in template

close #12884
close #12888
---
 src/shared/util.ts                      | 10 +++++++++-
 test/unit/modules/util/toString.spec.ts | 11 +++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 test/unit/modules/util/toString.spec.ts

diff --git a/src/shared/util.ts b/src/shared/util.ts
index e6f2af10697..6d84877b74d 100644
--- a/src/shared/util.ts
+++ b/src/shared/util.ts
@@ -90,10 +90,18 @@ export function toString(val: any): string {
   return val == null
     ? ''
     : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
-    ? JSON.stringify(val, null, 2)
+    ? JSON.stringify(val, replacer, 2)
     : String(val)
 }
 
+function replacer(_key: string, val: any): any {
+  // avoid circular deps from v3
+  if (val && val.__v_isRef) {
+    return val.value
+  }
+  return val
+}
+
 /**
  * Convert an input value to a number for persistence.
  * If the conversion fails, return original string.
diff --git a/test/unit/modules/util/toString.spec.ts b/test/unit/modules/util/toString.spec.ts
new file mode 100644
index 00000000000..1d7e2a919ab
--- /dev/null
+++ b/test/unit/modules/util/toString.spec.ts
@@ -0,0 +1,11 @@
+import { toString } from 'core/util/index'
+import { ref } from 'v3'
+
+test('should unwrap refs', () => {
+  expect(
+    toString({
+      a: ref(0),
+      b: { c: ref(1) }
+    })
+  ).toBe(JSON.stringify({ a: 0, b: { c: 1 } }, null, 2))
+})