I am trying in Laravel-livewire by leveraging AlpineJS, to create some forms. The code below is blade.php. The idea is:

1. Server provides a $fieldRegex.
2. createComponent runs creating the alpineJS component with rendered props.
3. onBlur runs validate() and tests the $fieldRegex.

    

        
        

    

@pushOnce('head')
    
@endPushOnce

Things are working well, until server updates happen. Once an update arrives from the server, and $fieldRegex or the $serverMessage changes the AlpineJS detects the mutation and correctly re-initialises. The problem is when the validate() is called it references the old $fieldRegex value. I can see that using the console.log().

For example if I first render has [a-zA-Z0-9]* and then server updates the page to [a-z] the validate() has the old regex.

After a lot of console.logs() I did, it seems when the validate() runs, runs based on the this context of the old component, or at least it is referencing the old (stale) state.

What I have tried: I added a new value, where upon init re-sets the context to a variable _this:

......
EXISTING CODE
......
@pushOnce('head')
    
@endPushOnce

The above seems to somewhat fix the issue but this is rather ugly and I am not sure it defeats the original problem of the stale state.

Another one I tried was when I render each component I assign a key wire:key='{{ "key-field-".$name}}' however when I change this to wire:key='{{ "key-field-". \Illuminate\Support\Str::random(8)}}' the AlpineJS behaves correctly. I believe this is because the Livewire sees the new id and it destroys the old component, is that really bad practice?

Does anyone have any experience with where they had to tackle alpineJS stale states?