Getter in child component resolves this to parent scope instead of its own component

[serhumanos]

Describe the bug
When using a getter inside a nested Alpine component, the this context does not reliably refer to the component where the getter is defined. Instead, it may resolve properties from the parent component scope.

This leads to unexpected behavior where a child component getter returns values from the parent

Device information (please complete the following information):

• OS:linux
• Browser firefox
• Extension version ??
• Alpine.js version 3.11.0

Code sample

Minimal code sample (ideally inline, not codesanbox/codepen as those have been deleted before the issue could be addressed in the past)

[https://jsfiddle.net/pbgcvswq/](https://jsfiddle.net/pbgcvswq/)

Screenshots

[HugoDF]

For future reference if the link doesn't work any more, here's the code:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div class="wrapper">

  <div class="component abuelo" x-data="rootComponent()">
    <span class="label"> Root </span>
    <div class="value-row">
      <span class="key"> name: </span>
      <span class="val" x-text="name"></span>
    </div>
    <div class="value-row">
      <span class="key">getterRoot:</span>
      <span class="val" x-text="getterRoot"></span>
    </div>
    
    <div class="component padre" x-data="parentFunction()">
      <span class="label"> Parent </span>
      <div class="value-row">
        <span class="key">name:</span>
        <span class="val" x-text="name"></span>
      </div>
      <div class="value-row">
        <span class="key">getterParent:</span>
        <span class="val" x-text="getterParent"></span>
      </div>
      
      <div class="component hijo" x-data="childFunction()">
        <span class="label"> Child </span>
        <div class="value-row">
          <span class="key"> name: </span>
          <span class="val" x-text="name"></span>
        </div>
        <div class="value-row">
          <span class="key">getterChild:</span>
          <span class="val" x-text="getterChild"></span>
        </div>
      </div>
    </div>
  </div>
</div>

// alpine data component after init
  document.addEventListener( 'alpine:init', () => {
    Alpine.data('rootComponent', rootFunction);
    Alpine.data('parentComponent', parentFunction);
    Alpine.data('childComponent', childFunction);
  });
  
  function rootFunction() {
    return {
      name: 'Root',
      get getterRoot(){ return this.name; }
    }
  }
  
  function parentFunction() {
    return {
      name: 'Parent',      
      get getterParent(){ return this.name; },
    }
  }
  
  function childFunction() {
    return {
      name: 'Child',
      get getterChild(){ return this.name }
    }
  }

And the issue: when "parentFunction" component is selected, "getterParent" data attribute should have value "Parent" instead it has value "Root".