JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <m-parent num-children="5"></m-parent>
</div>

<template id="m-child">
  <div>
    <button v-on:click="setstate(true)">Valid</button>
    <button v-on:click="setstate(false)">Invalid</button>
  </div>
</template>

<template id="m-parent">
  <div>
    <div v-for="(state, index) in states">
      <m-child v-on:newstate="newchildstate" :id="index"></m-child>
      <span v-if="state">Valid</span>
      <span v-else>Invalid</span>
    </div>

  </div>
</template>

JavaScript

Vue.component('m-child', {
  template: '#m-child',
  props: ['id'],
  data: function() {
    return {};
  },
  methods: {
    setstate: function(valid) {
      this.$emit('newstate', {
        id: this.id,
        state: valid
      });
    }
  }
});

Vue.component('m-parent', {
  template: '#m-parent',
  props: ['numChildren'],
  created() {
    for (var i = 0; i < this.numChildren; i++) {
      this.states[i] = false;
    }
  },
  methods: {
    newchildstate: function(valid) {
      this.$set(this.states, valid.id, valid.state);
    }
  },
  data() {
    return {
      states: []
    }
  }
});

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