EasyJavaScriptTypeScript

Vue watch() — Reactive Watcher

VueVue.jsReactivitywatchJavaScript

watch() is Vue's API for reacting to reactive state changes with access to both the new and old values.

const state = reactive({ count: 0 });

watch(
  () => state.count,       // source — a getter function
  (newVal, oldVal) => {    // callback — called on each change
    console.log(`${oldVal} → ${newVal}`);
  }
);

state.count = 5;  // logs "0 → 5"
state.count = 10; // logs "5 → 10"

Key behaviour:

  • The callback is NOT called immediately — only when the source changes.
  • The callback receives (newValue, oldValue).
  • The source is tracked automatically — when a reactive property accessed inside the source getter changes, the watcher re-runs.

Your task

Implement watch(source, callback), reactive(obj), and _reset().

The solve(op, ...args) harness is provided — do not modify it.

Sample tests

Test #1callback receives the new value
Input: ["basic",{"x":0},"x",5]
Output: 5
Test #2callback receives the old value as second argument
Input: ["old-val",{"x":10},"x",20]
Output: 10
Test #3callback is NOT called on watch() setup (lazy)
Input: ["not-immediate",{"x":0},"x"]
Output: 0
Test #4callback is called once per mutation
Input: ["count",{"n":0},"n",3]
Output: 3
Test #5watcher on "a" must NOT fire when "b" changes
Input: ["no-react",{"a":1,"b":2}]
Output: 0