hide a column in vue database using checkbox

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" />