Nouislider doesn't react to changes in Alpinejs variable nor Livewire which is entangled with alpine

Question

I have the following x-data scope:

        <div   x-data="{ sliderStoplossPercentageValue: @entangle('StopLossPC')}" >

Inside that scope there is a inputfield:

<input type="number" name="in_stopLossPercentage" id="in_stopLossPercentage" placeholder=""
          wire:model.live.debounce.500ms="StopLossPC"  
          x-model="sliderStoplossPercentageValue"
            />

Then comes the Nouislider DIV followed by the script:

 <div   id="in_stopLossPercentageSlider" wire:ignore></div>

<script>
                     
var sliderStopLossPercentage = document.getElementById('in_stopLossPercentageSlider');
var sliderStopLossPercentageValue = document.getElementById('in_stopLossPercentage');

if (sliderStopLossPercentage.noUiSlider) {

            }
            else
            {
                noUiSlider.create(sliderStopLossPercentage, {
                    start: [7],
                    step: 0.5,
                    tooltips: true,
                    animate: true,
                    behaviour: 'none',
                    animationDuration: 1600,
                    connect: 'lower',
                    range: {
                                                'min': [0.1, 0.1],
                                                '60%': [10, 0.1],
                                                '70%': [25, 1],
                                                '80%': [50, 5],
                                                'max': [100]
                                            }
                    
                });
                sliderStopLossPercentage.noUiSlider.on('end', function (values, handle) {
                @this.StopLossPC=values[handle];
                console.log('slider sets the variables')
                });
                
            };
        

</script>

Here is what works: The slider sets the Alpine variable sliderStopLossPercentageValue and livewire changes accordingly due to being entangled. There are other inputfields as well and when their input changes the value of my input field above reflects that change based on backend calculations. This change also immediately changes the alpine variable. Everything is nicely synced when it comes to my Alpine and Livewire variables.

What doesn't work: I can't find a way to set the slider to the current value of the alpinevariable when the variable changes. I tried livewire.hook because alpine is entangled but it didn't work either. There must be a simple way of watching the alpine variable for changes and then set the slider accordingly. However I can't find it. Of course I also want the slider to change when I make a manual input in the input field. This is easy to do but fails to work for non manual changes.

The solution must be super simple because I have the variables with correct values right there next to the slider but simply can't connect both. Maybe alpine.effect? I tried but got errors.

I am not an experienced coder at all. Help is much appreciated!