Data update not being reflected in the frontend

[fayne1337]

I'm creating a small app using Alpine.js in Typescript, but ran into an issue with my property change not being reflected in the frontend. I want to change the property progress inside my Group instance.

When I update the progress value from within my App class, it does work fine:

import Alpine from 'alpinejs';
import Group from './group';

class App
{
    public group: Group;

    init(): void
    {
        this.group = new Group;

        setTimeout(() => this.group.progress = 100, 2000);
    }
}

document.addEventListener('alpine:init', () =>
{
    Alpine.data('app', () => new App);
});

Alpine.start();

However, updating the value from within my Group class doest not change the value in the frontend:

export default class Group
{
    public progress: number = 50;

    constructor()
    {
        setTimeout(() => this.progress = 100, 2000);
    }
}

I have tried messing around with Alpine.reactive which some people recommended, but this did not work either.
What am I missing here? Any help is appreciated!

[ekwoka]

It just won't be able to be from logic that runs at the constructor.

Because it will refer to the underlying class instance, while from init it will refer to the reactive scope.