Fix class setters invocation on nested x-data

[helio3197]

The current implementation of the set trap in mergeProxies restricts key lookup to the target's own property keys. This prevents class setters defined in the target's prototype from being called when there is more than one object in the x-data stack.

This allows components like this to work:

<script>
  class BaseHandler {
    _prop = 'original'
  
    get prop() {
      return this._prop
    }
  
    set prop(v)  {
      this._prop = v
    }
  }
  window.baseHandler = () => new BaseHandler()
</script>

<div x-data>
  <div x-data="baseHandler()">
    <button x-text="prop" @click="prop = 'edited'"></button>
  </div>
</div>

[ekwoka]

I'm not sure how the test demonstrates the issue.

You have code related to prototype chain but the test doesn't use the prototype chain at all.

[helio3197]

It does, because the setter function is defined in the class instance's prototype not in the instance object itself, then when the setter is invoked e.g. value = 'somevalue' the current proxy's set trap won't be able to set the property value, because there is a check asserting that the invoked key must be an own property of the target (Object.prototype.hasOwnProperty.call(obj, name)) which evaluates to false in this case because the property itself is a getter and setter defined in the class instance prototype.

You can check the live issue in this codepen, and here is the same example with the implemented change.

[ekwoka]

Okay, and it bypasses the vue reactivity bug since it's a class setter and not own setter?

[helio3197]

No, I had not considered the scenario described by this PR, therefore referencing other parent data-stack objects will result in error. However, I've modified the code to use the prototype, where the setter is defined as the 'target'. Thus, this check can pass, and the setter method can be called with the mergeProxy as the this value.

const descriptor = Object.getOwnPropertyDescriptor(target, name);
        if (descriptor?.set && descriptor?.get)