Calling outer scope method will use inner scope this

[ekwoka]

Basically, when a child calls a method on the parent, the method's this is evaluated as the child's scope, not the parent where the method is defined.

I feel this is an unintended behavior, as a child and parent should not need to be so aware of the others implementation details (a child can inadvertently overwrite an property in it's own scope and then the parent can stop functioning when the property is now not referring to the intended values.

example:

https://codepen.io/ekwoka/pen/mdGpKJW

<div x-data="{ 
  value: 'foo',
  display: 'null',
  setDisplay() {
    this.display = this.value
  }
}">
  <span x-text="display">null</span>
  <div x-data="{ value: 'bar' }">
    <button @click="setDisplay">set to bar</button>
  </div>
  <button @click="setDisplay">set to foo</button>
</div>

While the method is the same, each bottom has a different behavior because of how the inner scope provides a new value in the property.

I'll look into fixing this, but it might be nice to see if anyone else agrees this is unintended (And thus a bug) or as an argument for why this behavior would be valuable as the default (I could see some use cases where it's helpful but those could be done simply if this was "fixed" and I think the cost of the behavior is a bigger issue)

[hirasso]

Just tested your snippet – I would also be surprised by the current behavior. To me it feels more like a bug than a feature. Changing it would be a breaking change, though.