Why Alpine.js magic inside x-data isn't reactive?

I wrote my first magic in Alpine.js. It returns the page scroll ratio, a number between 0-1, eventually with a scale (i.e. 100 to get the percenteage) and a round:

/**
 * @param {import("alpinejs").Alpine} Alpine
 */
export default (Alpine) => {
  const data = Alpine.reactive({ ratio: 0 });

  const calculate = () =>
    (document.documentElement.scrollTop || document.body.scrollTop) /
      ((document.documentElement.scrollHeight || document.body.scrollHeight) -
        document.documentElement.clientHeight) || 0;
  const update = () => (data.ratio = calculate());

  window.addEventListener('load', update);
  window.addEventListener('scroll', update, { passive: true });

  Alpine.magic('pageScroll', () => (scale, round) => {
    let value = data.ratio;
    if (!isNaN(scale)) {
      value *= scale;
    }
    if (!isNaN(round)) {
      value = value.toFixed(round);
    }

    return value;
  });
};

Works just fine using x-bind (see this pen and scroll the page):

<div class="fixed top-0 left-0 w-4 bg-red-500 duration-100"
     x-data x-bind:style="{ height: $pageScroll(100) + '%' }">
</div>

The problem is when I try to assign the $pageScroll(100) to a ratio property of the component (in order to reuse it), the magic isn't reactive anymore:

<div class="fixed top-0 right-0 w-4 bg-green-500 duration-100"
     x-data="{ scroll: $pageScroll(100) }"
     x-bind:style="{ height: scroll + '%' }"
     x-text="scroll">
</div>

Does anyone know if this is the normal behaviour and how can I solve the problem?

Since the magic register an event listener, attaching to both x-bind and x-text would create more listeners, degrading performances.

The magic properties are not available when defining x-data "since x-data is run before the component context (this) exists"
Here a good article on the subject from which I extracted the quoted phrase

You can try to work around the problem using the init() function, I think that a solution like this can work (I can't test it now):

<div class="fixed top-0 right-0 w-4 bg-green-500 duration-100"
     x-data="{ scroll: 0, scale: 100 }"
     x-init="scroll = $pageScroll(scale)"
     x-bind:style="{ height: scroll + '%' }"
     x-text="scroll"
>
</div>