toggle class conditionally in Vue.js - vue.js

Question

Im trying to toggle a class of an element (the parent of the button being clicked) in Vue.js (which I've only started learning recently).
The idea is that the disabled class would be applied when included is not true.
I've created a toggleClass function, but even that is not being called it seems.
https://codepen.io/dagford/pen/NzQrJM
HTML
<div id="app">
<div class="item" v-for="item in items" :id="item.id" :key="item.id">
<span>{{item.amt}}</span>
<button v-on:click="item.included = !item.included" v-on:click="toggleClass()">exclude me</buton>
</div>
<br>
<div id="total">total: {{ itemTotal }}</div>
</div>
VUE
var app = new Vue({
el: "#app",
data: {
items: [
{
id: 'item1',
included: 'true',
amt: 10,
className: 'disabled'
},
{
id: 'item2',
included: 'true',
amt: 20,
className: 'disabled'
},
{
id: 'item3',
included: 'true',
amt: 30,
className: 'disabled'
}
]
},
methods: {
toggleClass: function () {
if(this.included) {
console.log('test');
// code to toggle the 'disabled' class here?
}
}
},
computed: {
itemTotal() {
return this.items.reduce(function (sum, item) {
if (item.included) {
return item.amt + sum;
}
return sum;
}, 0)
}
}
});

Answer 1

Managed to get it working thanks to Timothy's suggestion, that was almost there. It was just missing the .item portion.
So it should be
<div v-bind:class="{ disabled:!item.included }"></div>

Answer 2

<div v-bind:class="{ disabled:!included }"></div>
Maybe try using class binding :
doc