vuejs add/remove class by referencing bool in an array - vue.js

Question

I am adding/removing a class based on boolean value. Works as just a bool but not if bool in array
This line works, the opaque class gets added/removed:
<img v-bind:class="{opaque: slide1}" src="img/forest-field.jpg" />
This line does not work, the opaque class does not get added/removed:
<img v-bind:class="{opaque: slideBools[0]}" src="img/forest-field.jpg" />
the code in instance data:
new Vue({
el: '#myCarousel',
data: {
slideBools: [true, false, false, false],
slide1: true,
slide2: false,
slide3: false,
slide4: false,
},
},
});
I am updating the bool value in an instance method like this:
methods: {
startSlides: function () {
var vm = this;
setInterval(() => {
vm.slideBools[vm.curImage] = true;
}, 4000);
},
}
Update question: I am wondering if how I reference the array value from html is where the problem lies

Answer 1

While updating the array value use Vue.set or its alias this.$set method to reflect in the DOM since its a nested property updating directly won't reflect in all cases.
this.$set(this.slideBools, 0, true)
Refer Vue documentation about reactivity for more information.
UPDATE : In your case, the code would be like as follows:
methods: {
startSlides: function () {
var vm = this;
setInterval(() => {
v.$set(vm.slideBools, vm.curImage, true);
}, 4000);
},
}

Answer 2

Try changing your data prop to:
data() {
return {
slideBools: [true, false, false, false],
slide1: true,
slide2: false,
slide3: false,
slide4: false,
};
},