agent-skills/skills/vue-best-practices/reference/watch-deep-same-object-reference.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
Deep Watch Callback Receives Same Object Reference for Old and New Values	MEDIUM	Comparing oldValue and newValue in deep watchers is misleading since they reference the same object	capability	vue3 watch watchers deep oldValue newValue object-reference

Deep Watch Callback Receives Same Object Reference for Old and New Values

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.

Don't rely on comparing newValue to oldValue in deep watchers for detecting what changed. Instead, track specific values or implement your own diffing.

Task Checklist

• Don't compare newValue === oldValue in deep watchers to detect changes
• For change detection, watch specific properties instead
• If you need old values, manually snapshot before changes
• Consider using a serialization approach for complex diffing needs
• The values differ only when the entire object is replaced

Incorrect:

import { reactive, watch } from 'vue'

const state = reactive({
  user: {
    name: 'John',
    preferences: { theme: 'dark' }
  }
})

// BAD: Trying to compare old and new values
watch(
  () => state.user,
  (newUser, oldUser) => {
    // This comparison is ALWAYS true for nested mutations!
    if (newUser === oldUser) {
      console.log('Same reference!')  // Always logs for nested changes
    }

    // This also won't work - they're the same object
    if (newUser.name !== oldUser.name) {
      console.log('Name changed')  // Never logs for nested mutations
    }
  },
  { deep: true }
)

// When this happens:
state.user.name = 'Jane'
// Both newUser and oldUser are { name: 'Jane', preferences: { theme: 'dark' } }

Correct:

import { reactive, watch, ref } from 'vue'

const state = reactive({
  user: {
    name: 'John',
    preferences: { theme: 'dark' }
  }
})

// CORRECT: Watch specific properties you care about
watch(
  () => state.user.name,
  (newName, oldName) => {
    console.log(`Name changed from "${oldName}" to "${newName}"`)
    // oldName and newName are primitives, work correctly
  }
)

// CORRECT: Watch multiple specific properties
watch(
  [() => state.user.name, () => state.user.preferences.theme],
  ([newName, newTheme], [oldName, oldTheme]) => {
    if (newName !== oldName) {
      console.log(`Name: ${oldName} -> ${newName}`)
    }
    if (newTheme !== oldTheme) {
      console.log(`Theme: ${oldTheme} -> ${newTheme}`)
    }
  }
)

Manual Snapshot Pattern

import { reactive, watch, ref } from 'vue'

const state = reactive({ count: 0, items: [] })

// Keep a manual snapshot for comparison
const previousSnapshot = ref(JSON.stringify(state))

watch(
  state,
  (newState) => {
    const currentSnapshot = JSON.stringify(newState)

    if (currentSnapshot !== previousSnapshot.value) {
      const oldData = JSON.parse(previousSnapshot.value)
      console.log('Old:', oldData)
      console.log('New:', newState)

      // Update snapshot for next comparison
      previousSnapshot.value = currentSnapshot
    }
  },
  { deep: true }
)

When Old and New Values Differ

import { reactive, watch } from 'vue'

const state = reactive({
  currentUser: { name: 'John' }
})

watch(
  () => state.currentUser,
  (newUser, oldUser) => {
    // THESE DIFFER when the object itself is replaced
    console.log('Old:', oldUser)  // { name: 'John' }
    console.log('New:', newUser)  // { name: 'Jane' }
  },
  { deep: true }
)

// Object replacement - old and new are different
state.currentUser = { name: 'Jane' }

// vs. Mutation - old and new are the same reference
// state.currentUser.name = 'Jane'

Using Getter Returns New Object

import { reactive, watch } from 'vue'

const state = reactive({
  user: { firstName: 'John', lastName: 'Doe' }
})

// CORRECT: Getter returns new object, so old/new comparison works
watch(
  () => ({ ...state.user }),  // Shallow clone
  (newUser, oldUser) => {
    // Now these are different objects
    console.log('Changed from', oldUser, 'to', newUser)
  },
  { deep: true }
)

Reference

• Vue.js Watchers - Deep Watchers