fix: markRaw in watch (#903)

Author: yaquawa

src/apis/watch.ts

@@ -20,6 +20,7 @@ import {
   WatcherPostFlushQueueKey,
 } from '../utils/symbols'
 import { getCurrentScopeVM } from './effectScope'
+import { rawSet } from '../utils/sets'
 
 export type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void
 
@@ -475,7 +476,7 @@ export function watch<T = any>(
 }
 
 function traverse(value: unknown, seen: Set<unknown> = new Set()) {
-  if (!isObject(value) || seen.has(value)) {
+  if (!isObject(value) || seen.has(value) || rawSet.has(value)) {
     return value
   }
   seen.add(value)

test/apis/watch.spec.js

@@ -7,6 +7,7 @@ const {
   set,
   computed,
   nextTick,
+  markRaw,
 } = require('../../src')
 const { mockWarn } = require('../helpers')
 
@@ -177,6 +178,34 @@ describe('api/watch', () => {
       .then(done)
   })
 
+  it('markRaw', (done) => {
+    const nestedState = ref(100)
+
+    const state = ref({
+      rawValue: markRaw({
+        nestedState,
+      }),
+    })
+
+    watch(
+      state,
+      () => {
+        spy()
+      },
+      { deep: true }
+    )
+
+    function changeRawValue() {
+      nestedState.value = Math.random()
+    }
+
+    changeRawValue()
+
+    waitForUpdate(() => {
+      expect(spy).not.toBeCalled()
+    }).then(done)
+  })
+
   it('should flush after render (immediate=false)', (done) => {
     let rerenderedText
     const vm = new Vue({