hide a column in vue database using checkbox - vue.js

Question

I made some code that hides a column by clicking on a checkbox and saves the changes to localstorage. The data is coming from a database so I have only 1 row line. My issue is when I refresh the page the header info is hiding itself which is good, but the rest of the lines are coming back. I would like to hide all of the column not just the header.
You can see on the image only the headers are not there after refreshing the page.
mounted() {
// "data-control-column" is a custom data attribute added to the html checkboxes
// when a check box changes loop through all, for any that are unchecked, add that checkbox's "data-control-column" value to our array
$('.opt').change(function(){
var states = [];
$('.opt').each(function(){
if(!$(this).is(':checked')) states.push($(this).data('control-column'));
});
setSates(states);
});
// when we need to set the sate of the UI, loop through the checkboxes checking if their "data-control-column" are in the "states" array
// if so, hide the specified column and uncheck the box
function setSates(states){
if(states){
if(!$.isArray( states )) states = JSON.parse(states); // if sates came from localstorage it will be a string, convert it to an array
$('.opt').each(function(i,e){
var column =$(this).data('control-column');
if($.inArray( column, states ) == -1){
$(this).attr('checked', true);
$('#myTable td:nth-child('+column+'), #myTable th:nth-child('+column+')').show();
}
else{
$(this).attr('checked', false);
$('#myTable td:nth-child('+column+'), #myTable th:nth-child('+column+')').hide();
}
});
localStorage.setItem('states', JSON.stringify(states));
}
}
// this will read and set the initial states when the page loads
setSates( localStorage.getItem('states') );
},
My database:
data() {
return {
hidePreLoader: true,
price: '',
purchase_price: '',
selling_price: '',
products: {},
tableOptions: {
tableName: 'products',
columns: [
{
title: 'lang.item_image',
key: 'image',
type: 'images',
source: '/uploads/products',
imagefield: 'imageURL',
sortable: false,
},
{title: 'lang.attribute_values', key: 'attribute_values', type: 'text', sortable: true},
{title: 'lang.quantity', key: 'test', type: 'text', sortable: true},
{title: 'lang.barcode', key: 'bar_code', type: 'text', sortable: true},
{title: 'lang.sku_2', key: 'sku_2', type: 'text', sortable: true},
{title: 'lang.sku_3', key: 'sku_3', type: 'text', sortable: true},
{title: 'lang.sku_4', key: 'sku_4', type: 'text', sortable: true},
{title: 'lang.selling_price', key: 'selling_price', type: 'text', sortable: true},
{title: 'lang.receiving_price', key: 'purchase_price', type: 'text', sortable: true},
],
formatting : ['selling_price','purchase_price'],
source: '/products/variantDetails/' + this.id,
},
}
},
and the checkbox:
<input type="checkbox" checked="checked" data-control-column="1" class="opt" />{{ trans('lang.item_image') }}