fix(customFormatter): properly accessing ref value during debugger (#12948)

packages/runtime-core/src/customFormatter.ts

@@ -4,6 +4,8 @@ import {
   isReadonly,
   isRef,
   isShallow,
+  pauseTracking,
+  resetTracking,
   toRaw,
 } from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
@@ -34,13 +36,16 @@ export function initCustomFormatter(): void {
       if (obj.__isVue) {
         return ['div', vueStyle, `VueInstance`]
       } else if (isRef(obj)) {
+        // avoid tracking during debugger accessing
+        pauseTracking()
+        const value = obj.value
+        resetTracking()
         return [
           'div',
           {},
           ['span', vueStyle, genRefFlag(obj)],
           '<',
-          // avoid debugger accessing value affecting behavior
-          formatValue('_value' in obj ? obj._value : obj),
+          formatValue(value),
           `>`,
         ]
       } else if (isReactive(obj)) {