Hide and show single element of an array

i have this

<div v-for="(header, index) in visibleHeaders" :key="index" class="form-check form-switch">
     <input v-model="hide" :value="h" class="form-check-input" type="checkbox" id="id">
     <label class="form-check-label" for="id">{{header}}</label>
</div>

<table class="table table-hover align-middle mb-0">
                    <thead class="">
                        <tr>
                            <th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
                            <th v-show="hide" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
                                {{ header }}
                            </th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
                            <td>
                                <input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
                            </td>
                            <td v-for="atr in column">
                                {{atr}}
                            </td>
                            <td>
                                <a @click="showLead(column.id)" class="btn btn-sm btn-info" data-mdb-toggle="modal" data-mdb-target="#editLeadModal">
                                    <i class="fa-solid fa-eye"></i>
                                </a>
                                <button @click="editLead(column.id)" type="button" class="btn  btn-sm btn-secondary"  data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </button>
                            </td>
                        </tr>
                        <tr v-show="!leads.length">
                            <td colspan="12" class="text-center">Sorry :( No data found.</td>
                        </tr>
                    </tbody>
                </table>

data() {
        return {
            hide: true,
         }
}

hideShow() {
            this.headers.forEach(header => {
                header.hide = false;
            });
            header.hide = true
        },
        visibleHeaders() {
            return this.headers.map(h => {
                return h.Field.replace("_", " ").toUpperCase()
            });
        },
        visibileColumn() {
            return this.leads.map(c => {
                // console.log(c)
                return c
            })
        },

I want to hide and show single column from table when i click on hide button for each column. Then i have tryed this method. But it does not work . Can anyone help me with this?