Флажки для скрытия / отображения столбцов в таблице Vue.js не работают должным образом

Я сделал таблицу начальной загрузки vue.js для загрузки некоторых данных из локальных файлов JSON. Я пытаюсь реализовать отображение / скрытие столбцов с помощью флажков. Я думаю, что решил большую часть проблемы, но проблема в том, что когда я скрываю столбец, а затем снова нажимаю на тот же флажок (чтобы снова сделать столбец видимым), я теряю порядок таблицы (этот столбец становится последним столбцом) и поэтому на. Например, если я скрываю столбец «Отметка времени», который является первым заголовком таблицы в моей таблице, а затем нажимаю, чтобы показать его снова, он больше не находится на первом месте, вместо этого он создается на последнем месте.

https://imgur.com/BaTfgci -> вот как приложение выглядит сейчас https://codepen.io/frane_caleta/pen/KKPMKrL -> codepen моего кода, вы не будете иметь возможность загрузить его без файла JSON, хотя https://imgur.com/a/23jx0lZ - > Пример данных JSON

Впервые задаете вопрос здесь, поэтому не стесняйтесь спрашивать меня, нужна ли вам дополнительная информация для решения проблемы :)

<b-form-group label="Hide columns: ">
  <b-form-checkbox-group id="checkbox-group-1" v-model="selected" :options="fields" name="flavour-1">
  </b-form-checkbox-group>
</b-form-group>

//my table
<b-table id="myTable" 
         :small="small" 
         :bordered="bordered"
         hover head-variant="dark"  
         stacked="md" 
         :items="cptItems" 
         :fields="selected" 
         :current-page="currentPage"
         :per-page="perPage" 
         :filter="filter" 
         :sort-by.sync="sortBy" 
         :sort-desc.sync="sortDesc"
         @filtered="onFiltered"
         :tbody-tr-class="rowClass"
          v-if="selected.length > 0">
</b-table>

//Javascript file
function initializeVue() {
  return new Vue({
        el: '#app',
        data() {
          return {
            items: data.logdatas,
            selected: [],
            fields: [{
                  text: 'Origin',
                  value: {
                    key: 'origin',
                    label: 'Origin',
                    sortable: true,
                    class: 'text-center',
                    index: 0
                  }
                },
                {
                  text: 'Timestamp',
                  value: {
                    key: 'timeStamp',
                    label: 'Timestamp',
                    sortable: true,
                    class: 'text-center',
                    index: 1
                  }
                },
                {
                  text: 'Level',
                  value: {
                    key: 'level',
                    label: 'Level',
                    sortable: true,
                    class: 'text-center',
                    index: 2
                  }
                }, ...there are 4 more fields here like this...

                //my method for creating those checkboxes
                created() {
                  this.selected = this.fields.map(field => field.value);
                }