V-bind:class is not reactive when using array for variable

The ‘is-success’ class on the the following div toggles when you click on the div:

    <div    class="notification" 
            @click="toggleItem1()" 
            v-bind:class="{'is-success': item}">This v-bind:class Works</div>

However, when replacing the variable “item” with the array “itemList[0]”, the same v-bind:class assignment no longer toggles, even though the console shows “itemList[0]” variable properly toggling:

   <div    class="notification" 
            @click="toggleItem2()" 
            v-bind:class="{'is-success': itemList[0]}">This v-bind:class Doesn't Work</div>

Here is the script:

      data: {
        item: true,
        itemList: [true]
       },
      methods: {
        toggleItem1: function(){
          this.item = !this.item;
        },
        toggleItem2: function(){
          this.itemList[0] = !this.itemList[0];
        }
      }

And, here is a PenCode link:

I’d much appreciate any thoughts!

Vue has a couple of change detection caveats.

For arrays, you cannot directly assign a new value as you’ve done.

Vue cannot detect the following changes to an array:

  1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
  2. When you modify the length of the array, e.g. vm.items.length = newLength

Instead, you have to use the helper Vue.set or array.splice.

Brilliant; thank you so much!