When implementing watchers in Vue applications, ensure they are configured appropriately for the data structures they observe. Two common pitfalls to avoid:

Use deep: true for complex data structures: When watching arrays or objects that might be modified in-place (push, pop, property updates), enable deep watching to detect these changes:

watch(
  () => props.messages,
  async (messages) => {
    // Handler logic
  },
  { immediate: true, deep: true } // Enable deep watching for arrays/objects
)

Without deep watching, the watcher will only trigger when the reference changes, not when items are added or properties modified.

Watch specific properties instead of whole objects: For better performance and stability, watch the specific primitive property you care about rather than the entire object:

// Less optimal - watches entire object reference
watch(
  () => selected,
  // Handler logic
)

// More optimal - watches just the ID property
watch(
  () => selected?.id,
  // Handler logic
)

This prevents unnecessary watcher triggers when unrelated properties change and makes your reactivity system more predictable and efficient.

Add Repository

Private Repository