JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.js"></script>
<div id="app">
  <div
    v-for="n in $store.state.items"
    :class="[ 'item', n.checked && 'checked' ]"
  >
    <h3>{{ n.text }}</h3>
    <button @click="$store.commit('toggleItem', n.id)">toggle</button>
    <span>checked: {{ n.checked }}</span>
  </div>
</div>

CSS

.item {
  margin: 10px;
  padding: 10px;
  border: 1px solid silver;
}

.item.checked {
  background: red;
  color: white;
}

JavaScript

const store = new Vuex.Store({
  state: {
    items: [
      { id:  69, checked: false, text:  'hello, world!!' },
      { id: 187, checked: false, text:  'fuck the world' },
      { id: 666, checked: false, text: 'fuck everything' },
    ],
  },
  mutations: {
    toggleItem(state, id) {
      const item = state.items.find(n => n.id === id);
      if (item) {
        item.checked = !item.checked;
      }
    },
  },
})

new Vue({
  store,
  el: '#app',
});