Q: vuejs add/remove class by referencing bool in an array 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

A: 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);
    },
  }


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

