Can't we watch the structure attributes in x-data using x-effect?

[JalalJaberi]

I don't know if it's a bug, or if it works as it should.
Assume this piece of code:

   <div x-data="{
        items: {
            1: 'apple',
            2: 'banana',
            3: 'cherry'
        },
        updateItem(event) {
            const { key, value } = event.detail;
            this.items[key] = value;
        } }" @update-item.window="updateItem" x-effect="console.log('items changed:', items)">

        <button @click="items = {}">Remove all</button>
        <button @click="$dispatch('update-item', { key: 1, value: 'apricot' })">Update Apple (silently)</button>
        <button @click="items[1] = 'apricot'">Update Apple</button>
    </div>

The first two buttons work as expected.
But why that last one doesn't?
Again, I'm not sure if it's a bug, so please if it's working as expected, can someone explain it?

[JalalJaberi]

Okay, I investigated more and found that this is not a bug—it's how AlpineJS is designed to work. Since the items object reference hasn't changed, Alpine doesn't detect the update to a property inside it.

Now, this could be a feature request for Alpine to introduce something like Vue.set() (or another method) to explicitly trigger reactivity for nested properties.

Do you think this kind of feature aligns with AlpineJS’s philosophy, or does it go against its lightweight and declarative nature?

[ekwoka]

Yes, it's intended, as the thing you accessed has not been reassigned.

If you did console.log(JSON.stringify(items)) it would trigger on all possible changes.

I don't see any reason why you would want to have it respond to things not being accessed. Why rerun effects that give the same result?

[JalalJaberi]

Thank you @ekwoka for your answer.

So, I guess it means that x-effect watches the whole expression like JSON.stringify(items) not the variable used inside the expression. Good to know. (I guess it's achieved by assigning the whole expression to a variable and making it reactive?!)

If you're interested, I've passed each item to another Alpine element to be used as its own state/data. When these child elements change the item, I'd like to be informed at the parent level. (I might eventually use a custom event for that)

       <ul>
            <template x-for="(item, key) in items" :key="key">
                <div
                    x-data="childComponent(key, item, (key, value) => items[key] = value)"
                    x-effect="console.log('an item changed', item)">
                ></div>
            </template>
        </ul>

    <!-- Child Component Template -->
    <template id="child">
        <div>
            <span x-text="value.item"></span>
            <input type="text" x-model="value.item" 
                @input="onUpdate(value.key, value.item)">
        </div>
    </template>

    <script>
        function childComponent(key, item, onUpdate) {
            return {
                value: { key, item },
                onUpdate, // Store the passed function
                init() {
                    this.$el.innerHTML = document.getElementById("child").innerHTML;
                    Alpine.initTree(this.$el); // Re-initialize Alpine on injected HTML
                }
            };
        }
    </script>

[ekwoka]

It only is reactive to values that are accessed in running the effect.

The example there is strange so I can't easily suggest the clearer approach.

What reason would the parent have for needing to be "informed" of the changes?

[JalalJaberi]

The parent should send the data to an API, every time it's changed. But I don't like the child element to explicitly inform the parent (e.g. by dispatching a known public event). I'd like to have an out-of-the-box solution for this.

This is how I desire it to work:

• Parent has a structure/array (items) as data/state.
• Each item is used as a data/state for a Child element.
• When each child element changes its own data it'll be applied the Parant's data.
• The parent watches its data and when it changes, calls an API.

Sorry, for not adding the full code here. I tried to make it small to point out the exact part of the problem.

[ekwoka]

You can use $watch then

https://alpinejs.dev/magics/watch