I've a simple Alpinejs component named "glide". I'm passing a configuration object, making it reactive with Alpine.reactive:
Alpine.data('glide', (config = {}) => ({
glide: null,
init() {
this.config = Alpine.reactive(config);
Alpine.effect(() => {
console.log('effect', this.config);
});
this.glide = new Glide(this.$el, this.config);
this.glide.mount();
},
}));
For some reason the Alpine.effect isn't invoked, but the view reflect the updated config.perView value:
<div x-data="glide({ perView: 1 })">
<button @click="config.perView++">
Increase perView (current: <span x-text="config.perView"></span>)
</button>
</div>
What I'm missing?