Toggle each element in array does not work

I have a table in vue js which I fill with data from the backend. I copy the entire db structure as an object and display it in vue js as it is with all the fields. Now I’m stuck somewhere, more precisely I want to have a management of the fields of the table by deciding whether I want to display or not in the table. I made a function that works but not as expected, can someone help me to develop it properly?

<button class="btn btn-info dropdown dropdown-toggle" type="button" id="setVisibility" data-mdb-toggle="dropdown" aria-expanded="false" >
   TABLE FIELD MENAGMENT 
</button>
  <ul class="dropdown-menu prevent-close py-1 px-2" aria-labelledby="setVisibility">
    <li>
     <div class="layout-header pt-2 text-center">
     <h6>Hide/Show</h6>
     </div>
     <div v-for="(header, key, index) in visibleHeaders" :key="key" class="form-check form-switch">
       <input v-model="isHidden" :value="key" class="form-check-input " type="checkbox" id="isHidden">
       <label class="form-check-label" for="isHidden">{{header}}</label>
     </div>
    </li>
  </ul>

<thead class="">
<tr>
   <th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
   <th v-if="!isHidden" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
       {{ header }}
   </th>
   <th>ACTION</th>
</tr>
</thead>

...

data() {
   return {
     isHidden: false,
     headers: [],
     ...
    }
}
 computed: {
        visibleHeaders() {
            return this.headers.map(h => {
                h.isHidden = true
                return h.Field.replace("_", " ").toUpperCase()
            });
        },
}

You can do something like on the field it is preferable to use key instead of index since you might wanna fill the reference object programmatically.

v-model=“isHidden[index|key]”

And in data option instead of boolean you can use an object to reference the value

isHidden: {}