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-1" class="app">
  <div
    v-for="n in $store.state.items"
    :key="n.id"
    :class="[ 'item', n.active ? 'active' : '' ]"
    @click="$store.commit('toggle', n)"
  >{{ n.id }}</div>
</div>

<div id="app-2" class="app">
  <div
    v-for="n in $store.state.items.slice().reverse()"
    :key="n.id"
    :class="[ 'item', n.active ? 'active' : '' ]"
    @click="$store.commit('toggle', n)"
  >{{ n.id }}</div>
</div>

CSS

.app {
  margin: 10px;
  border: 1px solid black;
}

.item {
  margin: 10px;
  border: 1px solid silver;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 40px;
  cursor: pointer;
}

.active {
  background: red;
  color: white;
}

JavaScript

const mutations = {
  toggle: (state, item) => item.active = !item.active,
};

const createStore = (numItems) => new Vuex.Store({
  state: {
    items: [...Array(numItems)].map((n, i) => ({ id: i + 1, active: false })),
  },
  mutations,
});


new Vue({
  store: createStore(23),
  el: '#app-1',
});

new Vue({
  store: createStore(17),
  el: '#app-2',
});