Changing component scope variables in async function

[leo-petrucci]

Sorry for posting another question so soon 😅

I'm trying to change a variable depending on the result of a fetch request.

Consider my main.ts:

const comment = () => {
  return {
    loading: true,
    async init() {
      // Pretend as if I was awaiting for a request here
      console.log("not authenticated");
      this.loading = false;
    },
  };
};

And my index.html:

    <div x-data="comment(); comment().init();" />

I'm able to initialise loading, but for whatever reason, despite init() successfully logging not authenticated to the console, it doesn't seem to also set this.loading = false.

Is there a specific way to do this I'm not understanding? Is it because init() returns a promise?

EDIT:
I've tried moving this.loading = false to its own function:

    setLoading() {
      console.log("not loading anymore");
      this.loading = false;
    },

If I call this directly from a button it works, but if I call it from my asynchronous function it doesn't. 🤷‍♂️

EDIT2:
I have also tried moving the function to x-init:

    <div x-data="comment()" x-init="comment().init()" />

Nada

Codesandbox example:
https://codesandbox.io/s/dazzling-thunder-kycli?file=/src/main.ts

[leo-petrucci]

Turns out the only problem was the way I was using x-init. Switched to x-init="init()" and it worked.