1---
2title: Deep Watch Callback Receives Same Object Reference for Old and New Values
3impact: MEDIUM
4impactDescription: Comparing oldValue and newValue in deep watchers is misleading since they reference the same object
5type: capability
6tags: [vue3, watch, watchers, deep, oldValue, newValue, object-reference]
7---
8 
9# Deep Watch Callback Receives Same Object Reference for Old and New Values
10 
11**Impact: MEDIUM** - When using deep watchers on reactive objects, both `newValue` and `oldValue` in the callback point to the same object reference. They will always be equal for nested mutations because Vue doesn't clone the object before mutation.
12 
13Don't rely on comparing `newValue` to `oldValue` in deep watchers for detecting what changed. Instead, track specific values or implement your own diffing.
14 
15## Task Checklist
16 
17- [ ] Don't compare newValue === oldValue in deep watchers to detect changes
18- [ ] For change detection, watch specific properties instead
19- [ ] If you need old values, manually snapshot before changes
20- [ ] Consider using a serialization approach for complex diffing needs
21- [ ] The values differ only when the entire object is replaced
22 
23**Incorrect:**
24```javascript
25import { reactive, watch } from 'vue'
26 
27const state = reactive({
28  user: {
29    name: 'John',
30    preferences: { theme: 'dark' }
31  }
32})
33 
34// BAD: Trying to compare old and new values
35watch(
36  () => state.user,
37  (newUser, oldUser) => {
38    // This comparison is ALWAYS true for nested mutations!
39    if (newUser === oldUser) {
40      console.log('Same reference!')  // Always logs for nested changes
41    }
42 
43    // This also won't work - they're the same object
44    if (newUser.name !== oldUser.name) {
45      console.log('Name changed')  // Never logs for nested mutations
46    }
47  },
48  { deep: true }
49)
50 
51// When this happens:
52state.user.name = 'Jane'
53// Both newUser and oldUser are { name: 'Jane', preferences: { theme: 'dark' } }
54```
55 
56**Correct:**
57```javascript
58import { reactive, watch, ref } from 'vue'
59 
60const state = reactive({
61  user: {
62    name: 'John',
63    preferences: { theme: 'dark' }
64  }
65})
66 
67// CORRECT: Watch specific properties you care about
68watch(
69  () => state.user.name,
70  (newName, oldName) => {
71    console.log(`Name changed from "${oldName}" to "${newName}"`)
72    // oldName and newName are primitives, work correctly
73  }
74)
75 
76// CORRECT: Watch multiple specific properties
77watch(
78  [() => state.user.name, () => state.user.preferences.theme],
79  ([newName, newTheme], [oldName, oldTheme]) => {
80    if (newName !== oldName) {
81      console.log(`Name: ${oldName} -> ${newName}`)
82    }
83    if (newTheme !== oldTheme) {
84      console.log(`Theme: ${oldTheme} -> ${newTheme}`)
85    }
86  }
87)
88```
89 
90## Manual Snapshot Pattern
91 
92```javascript
93import { reactive, watch, ref } from 'vue'
94 
95const state = reactive({ count: 0, items: [] })
96 
97// Keep a manual snapshot for comparison
98const previousSnapshot = ref(JSON.stringify(state))
99 
100watch(
101  state,
102  (newState) => {
103    const currentSnapshot = JSON.stringify(newState)
104 
105    if (currentSnapshot !== previousSnapshot.value) {
106      const oldData = JSON.parse(previousSnapshot.value)
107      console.log('Old:', oldData)
108      console.log('New:', newState)
109 
110      // Update snapshot for next comparison
111      previousSnapshot.value = currentSnapshot
112    }
113  },
114  { deep: true }
115)
116```
117 
118## When Old and New Values Differ
119 
120```javascript
121import { reactive, watch } from 'vue'
122 
123const state = reactive({
124  currentUser: { name: 'John' }
125})
126 
127watch(
128  () => state.currentUser,
129  (newUser, oldUser) => {
130    // THESE DIFFER when the object itself is replaced
131    console.log('Old:', oldUser)  // { name: 'John' }
132    console.log('New:', newUser)  // { name: 'Jane' }
133  },
134  { deep: true }
135)
136 
137// Object replacement - old and new are different
138state.currentUser = { name: 'Jane' }
139 
140// vs. Mutation - old and new are the same reference
141// state.currentUser.name = 'Jane'
142```
143 
144## Using Getter Returns New Object
145 
146```javascript
147import { reactive, watch } from 'vue'
148 
149const state = reactive({
150  user: { firstName: 'John', lastName: 'Doe' }
151})
152 
153// CORRECT: Getter returns new object, so old/new comparison works
154watch(
155  () => ({ ...state.user }),  // Shallow clone
156  (newUser, oldUser) => {
157    // Now these are different objects
158    console.log('Changed from', oldUser, 'to', newUser)
159  },
160  { deep: true }
161)
162```
163 
164## Reference
165- [Vue.js Watchers - Deep Watchers](https://vuejs.org/guide/essentials/watchers.html#deep-watchers)
166