fix(utils): unwrap refs when stringifying values in template

close #12884
close #12888

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.

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))
+})