Vue.js v-if inside v-for not actively listening to array change

Question

I am trying do display an element for each array inside an array and display that element if its array contains a true boolean. The if function runs the first time but the element does not disappear when the value changes.

<li v-for="(value, index) in list">
    <span> {{ value[0] }} </span>
    <span v-if='value[1]'> {{ value[2] }} </span>
</li>


var List = new Vue({
    el: "#List",
    data: {
        list: ['fizz',true,0],

    },
    methods: {
        toggleItem: function(index) {
            this.list[index][1] = !this.list[index][1];
        },

    }
})

I should be able to run

List.toggleItem(0)

Answer 1

If you are updating the array in Vue then use Vue.set(); so that Vue can track the changes and update the template

for example,

Vue.set(value, 1, false);

Note: simpley updating like this value[1] = false; this will not work

For more, https://v2.vuejs.org/v2/guide/list.html#Caveats