The core reactivity pattern used by modern frameworks like Vue 3 and MobX.

function reactive(target, onChange) {
  return new Proxy(target, {
    get(obj, prop) {
      const val = Reflect.get(obj, prop);
      return typeof val === 'object' && val !== null ? reactive(val, onChange) : val;
    },
    set(obj, prop, value) {
      const oldVal = obj[prop];
      const success = Reflect.set(obj, prop, value);
      if (success && oldVal !== value) {
        onChange(prop, value);
      }
      return success;
    }
  });
}