Класс переключения Vue.js по клику с помощью v-for

Как вы переключаете класс в vue.js для отображаемых элементов списка? Этот вопрос является продолжением вопроса это с хорошим ответом. Я хочу иметь возможность переключать каждый элемент по отдельности, а также переключать их все. я пытался решение с приведенным ниже кодом, но оно кажется хрупким и, похоже, не работает.

Другим решением было бы использовать одну переменную для переключения всех элементов, а затем каждый элемент имеет локальную переменную, которую можно включать и выключать, но не знаю, как это реализовать.

// html element
<button v-on:click = "toggleAll"></button>
<div v-for = "(item, i) in dynamicItems" :key=i
     v-bind:class = "{ active: showItem }"
     v-on:click = "showItem[i] = !showItem[i]">
</div>

//in vue.js app
//dynamicItems and showItem will be populated based on API response
data: {
    dynamicItems: [], 
    showItem: boolean[] = [],
    showAll: boolean = false;
},
methods: {
    toggleAll(){
        this.showAll = !this.showAll;
        this.showItem.forEach(item => item = this.showAll);
    }
}