[Vuejs]-Toggle each element in array does not work

new Vue({
  el: '#demo',
  data() {
    return {
      isHidden: [],
      headers: [{Field: 'a', isHidden: false}, {Field: 'b', isHidden: false}, {Field: 'c', isHidden: false}],
      selectAll: false,
      leads: [['aa', 'bb', 'cc'], ['aa', 'bb', 'cc']],
      selected: null
    }
  },
  computed: {
    visibleHeaders() {
      return this.headers.map(h => {
        return h.Field.replace("_", " ").toUpperCase()
      });
    },
  },
  mounted() { 
    this.isHidden = this.headers.map(h => !h.isHidden) 
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul class="dropdown-menu prevent-close py-1 px-2" aria-labelledby="setVisibility">
    <li class="dropdown-item">
     <div v-for="(header, index) in visibleHeaders" :key="index" class="form-check form-switch">
       <input v-model="isHidden[index]" :id="index" :value="index" class="form-check-input " type="checkbox" id="isHidden">
       <label class="form-check-label" for="isHidden">{{ header }}</label>
     </div>
    </li>
  </ul>
  <table>
    <thead class="">
      <tr>
        <th v-if="isHidden[index]" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
           {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-show="leads.length" v-for="column in leads" >
        <td v-for="(atr, index) in column" >
          <div v-if="isHidden[index]" >
            {{ atr }}
          </div>
        </td>
      </tr>
      <tr v-show="!leads.length">
        <td colspan="12" class="text-center">Sorry :( No data found.</td>
      </tr>
    </tbody>
  </table>
</div>