x-model not being propagated via x-modelable on page load

[silasdb]

Hello!

I'm learning some AlpineJS. This is a great project. Thanks! I just learned about the x-modelable mechanism, so I can "send" values up in a hierarchy of div's. I'm doing this to solve the following problem:

I'm validating the content of several text box. For each one, there is a span that shows whether or not they are empty. On both both page load and page refresh it works as expected.

I'm also setting an input button disabled property to false if any of text boxes are empty. The input is declared a level up in the hierarchy. Although the input button gets correctly updated when I type something in the text box, it doesn't get expected state on page load or page refresh, even if the text input box is correctly filled up with x-model.fill.

Maybe it is the same problem as #3591 ?

Any help?

Below is the minimal code I'm using to test. Thanks!

    <div x-data="
        {
            validTop: false,
            get check() {
                return this.validTop;
            }
        }
    ">

        <div x-modelable="valid" x-model="validTop" x-data="
            {
                content: '',
                valid: false,
                get validate() {
                    if (this.content === '') {
                        this.valid = false;
                        return 'empty';
                    } else {
                        this.valid = true;
                        return 'not empty';
                    }
                }
            }"
         >
            <input value="test" x-model.fill='content'/>
            <span x-text="validate"></span>
            <br/>
         </div>


         <input x-bind:disabled="!check" type="submit"/>
    </div>