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" >
  <ul class="dropdown-menu prevent-close py-1 px-2" aria-labelledby="setVisibility">
     <div class="layout-header pt-2 text-center">
     <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>

<thead class="">
   <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 }}


data() {
   return {
     isHidden: false,
     headers: [],
 computed: {
        visibleHeaders() {
            return => {
                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.


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

isHidden: {}