Reactive objects, like in vue

Question

I like the reactivity of vue and created a function that makes Object's reactive. Just like in vue 3 .reactive

I wonder if my approach is ok or i have made a fundamental mistake:

const item = {
 foo: "bar",
 bool: true,
 arr: ["hello", {
 world: "Its nice here",
 enabled: true,
 }, Date.now(), Buffer.from("Hello")],
 nested: {
 buff: Buffer.from("World"),
 seems: {
 ts: Date.now(),
 like: {
 arr: ["foo", true, Symbol("bar")],
 it: {
 is: {
 so: true
 }
 }
 }
 }
 }
}
/**
 * @function reactive
 * Returns the given object wrapped in a proxy object.<br />
 * Get/set & apply calls to the object are intercepted and additional callbacks called.
 * 
 * @param {Object|Array} obj Instace of `Object`. Anything that can in js be called "Object"
 * @param {Function} getter Same as proxy `get()`
 * @param {Function} setter Same as proxy `set()`
 * @param {Function} apply Same as proxy `apply()`
 * 
 * @returns {Proxy} Wrapped given <obj> Object.
 * 
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
 */
function reactive(obj, getter = () => {
 // dummy
 // args: target, prop, receiver
}, setter = () => {
 // dummy
 // args: target, prop, value
}, apply = () => {
 // dummy
 // args: target, scope, args
}) {
 for (let prop in obj) {
 if (obj[prop] instanceof Object && !obj[prop] instanceof Buffer) {
 console.log("Wrapp object", obj[prop])
 obj[prop] = reactive(obj[prop], getter, setter, apply);
 }
 }
 return new Proxy(obj, {
 set(target, prop, value) {
 //console.log("setter();", "obj: ", obj, "prop:", prop, "value: ", value);
 setter(target, prop, value);
 target[prop] = value;
 },
 get(target, prop, receiver) {
 //console.log("getter();", "target: ", target, "prop:", prop);
 getter(target, prop, receiver);
 return target[prop];
 },
 apply(target, scope, args) {
 //console.log("apply: target: ", target, "scope:", scope, "args: ", args);
 apply(target, scope, args);
 return target.apply(scope, args);
 }
 });
}
const proxy = reactive(item, (target, prop, receiver) => {
 // getter
 console.log("getter();", "target: ", target, "prop:", prop);
}, (target, prop, value) => {
 // setter
 console.log("setter();", "target: ", target, "prop:", prop, "value: ", value);
}, (target, scope, args) => {
 // apply
 console.log("apply: target: ", target, "scope:", scope, "args: ", args);
});
//proxy.nested.seems.like.it.is.so = false
//console.log(proxy.nested.seems.like.it.is.so);
//console.log(proxy.arr[1].world)
//proxy.arr[1].world = "changed text";
//proxy.arr[0] = false;
console.log(proxy)

The function works as expected and i have not found any problems.