Reactivness of data accessed via html element not working

[simonferndriger]

Is it possible to access the full alpine object (especially the data attributes) when I just got the html element that contains it?

See this exampe: https://awesomealpine.com/play?share=_3DycHssitik

[simonferndriger]

Or, if that is not (easily) possible. Can I store the whole button object to $button, not just $el? Using this does not work.

[simonferndriger]

OK, found a way using $data: https://awesomealpine.com/play?share=u9WIExOdFU3O - and it is even working with Alpine.$data($el): https://awesomealpine.com/play?share=WrsLfrAn7hy6

However, in my own app, the $data is not reactive somehow like in these examples... tricky one

[ekwoka]

It will still be reactive inside of effects.

not sure what you're doing in your case, but effects will not register dependencies if they are not accessed synchronously, and thus won't rerun when the dependency changes.

[simonferndriger]

OK, what does this mean exactly? Do I have to use x-effect somehow? What I do in prod is this (roughly):

init(){
this.flickData = Alpine.$data(app.$currentFlick); // $currentFlick is the $el of a button
}

Then, somewhere else, I use this flickData like this:

img :src="/images/icons/white/${flickData.providers?.length ? 'shop' : 'notify'}.svg" x-cloak x-show="flickData.providers"

What is interesting (to me), when I try to use x-init="$watch('flickData', data => console.log(data))" on the img tag, I get the following warning:

[ekwoka]

In that example of

<img :src="`/images/icons/white/${flickData.providers?.length ? 'shop' : 'notify'}.svg`">

it will be reactive

I get the following warning:

Because your data ends up being circular.

[simonferndriger]

Well, that's what I thought too, that it will be reactive - but somehow it wasn't, that's what was so confusing. But mean while I found a way sucht that it doesn't need to be reactive anymore. Thanks anyway.