Vue

HTML

<div id="app">
<button @click="unmarkall">Unmark all</button>
  <div class="items">
    <Elem
      v-for="item in items" :key="item.id"
      v-model="item.marked"
      :text="item.text"
    ></Elem>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.items {
  display: flex;
  flex-wrap: wrap;
}
.elem {
  user-select: none;
  width: 100px;
  height: 50px;
  border: 1px solid red;
  margin: 2px;
  cursor: pointer;
}
.elem.marked { background: yellow; }

Vue

// Вспомогательная функция
function genItems(count){
  let items = [];
  for (let i=1; i<=count; i++){
  	items.push({
    	id:i,
      marked:false,
      text:'ELement #'+i
    });
  }
  return items;
}

// Дочерний компонент списка
Vue.component('Elem', {
	template:`<div class="elem"
  :class="{marked}" @click="mark">{{text}}</div>`,
  model: {
    prop : 'marked',
    event: 'onMark',
  },
  props: {
    marked: {type: Boolean, default: false},
    text: String,
  },
  data: () => ({}),
  methods:{
    mark(){
    	this.$emit('onMark', !this.marked);
    }
  }
});

// Родительский компонент
new Vue({
  el: "#app",
  data: {
    items: []
  },
  created(){
  	this.items = genItems(10);
  },
  methods: {
    unmarkall(){
    	this.items.map(item=>{
      	item.marked = false;
      });
    }
  }
})