vue-tables-2 add checkbox to header

gistfile1.txt

<template>
  <div class="">
    <header class="jumbotron">
        <h3> Products </h3>
      <div class="d-flex justify-content-start     mb-3">
        <router-link :to="{name: 'products-add', params: {siteId: siteId}}" class="btn btn-sm btn-outline-secondary"><b-icon-plus></b-icon-plus>Add product
           </router-link>
      </div>
      <div>
        <button class="btn btn-toolbar" type="submit" @click="runRestock()"><b-icon-caret-right-fill></b-icon-caret-right-fill> Run restock</button>

      </div>
      <v-client-table ref="products" :columns="columns" v-model="data" :options="options">

        <!-- checkbox for each header (prefix column name with h__-->
        <template slot="h__selected">
          <input type='checkbox'  @click='selectAllAtOnce()'>

        </template>


        <input slot="selected" slot-scope="props" type="checkbox"  v-model="checkedRows" :checked="props.row.selected" :value="props.row.id">

        <div slot="title" slot-scope="props">
          {{props.row.title.substring(0, 20)}}
        </div>
        <div slot="url" slot-scope="props">
          <a :href="props.row.url" target="_blank">{{props.row.url.substring(0, 50)}}</a>
        </div>
        <div slot="createdAt" slot-scope="props">
          {{props.row.createdAt | moment("dd, MM YY")}}
        </div>
        <div slot="updatedAt" slot-scope="props">
          {{props.row.updatedAt | moment("dd, MM YY")}}
        </div>

        <div slot="modify" slot-scope="props">
          <div class="button-group">
            <router-link :to="`/admin/products/edit/${props.row.id}`" class="btn btn-sm btn-secondary">edit</router-link>
            &nbsp;
            <button @click="removeProduct(props.row.id)" class="btn btn-sm">delete</button>
          </div>
        </div>
        <div slot="action" slot-scope="props">
          <div class="button-group">
            <router-link :to="`/admin/products/${props.row.id}/crawler/`" class="btn btn-sm">Crawler</router-link>|
            <router-link :to="`/admin/products/${props.row.id}/rule/`" class="btn btn-sm">Rule</router-link>|
            <router-link :to="`/admin/products/${props.row.id}/price/`" class="btn btn-sm">Price</router-link>
          </div>
        </div>

      </v-client-table>
    </header>
  </div>
</template>

<script>
import ProductService from '../../services/product.service';

export default {
  name: 'Products',
  data() {
    return {
      isSelected: false,
      checkedRows:[],
      siteId: 0,
      data : [],
      columns: [ 'selected', 'id', 'title', 'price', 'url','createdAt','updatedAt','modify','action'],
      options: {
        headings: {
          price: 'Price 円',

        },
        sortable: ['title', 'url'],
        filterable: ['title', 'url']
      }
    };
  },
  async mounted() {
     this.siteId = this.$route.params.siteId;
     await this.fetchAll(this.$route.params.siteId);

  },
  methods: {
    selectAllAtOnce(){
      console.log('isSelected: ' , this.isSelected)
      let length = this.data.length;
      this.isSelected= !this.isSelected;
      this.checkedRows = [];
      for (let i = 0; i < length; i++) {
        this.data[i].selected = this.isSelected;
        if(this.isSelected){
          this.checkedRows.push(this.data[i].id)
        }

      }
      console.log('checkedRows: ' , this.checkedRows)
      //this.$refs.products.refresh();
    },
    runRestock() {
      console.log('checkedRows: ', this.checkedRows);
    },
    async fetchAll(siteId) {
      ProductService.all(siteId).then(
          response => {
            let length =  response.data.length;
            this.data = [];
            for (let i = 0; i < length; i++) {
              this.data[i] =  response.data[i];
              this.data[i].selected = this.isSelected;
            }
            //this.data =  response.data;
          },
          error => {
            this.content =
                (error.response && error.response.data && error.response.data.message) ||
                error.message ||
                error.toString();
          }
      );
    },
    async removeProduct(id) {

      await ProductService.delete(id).then(
          response => {
            console.log(response);
            alert('Destroy Successfully');
            this.fetchAll(this.siteId);
          },
          error => {
            this.content =
                (error.response && error.response.data && error.response.data.message) ||
                error.message ||
                error.toString();
          }
      );
    }
  }
};
</script>
<style>
.VuePagination {
  text-align: center;
}

.vue-title {
  text-align: center;
  margin-bottom: 10px;
}

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.VueTables__child-row-toggler {
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}

[v-cloak] {
  display:none;
}

.VueTables__search-field label{
  width: 40px;
  float: left;
  margin-right: 20px;
  padding-top: 5px;
}
.VueTables__limit-field {
  float: left;
}
.VueTables__limit-field label {
  float: left;
  padding:5px 5px 5px 0px;
}
.VueTables__limit-field select {
  float: left;
  margin-left: 10px;
}
</style>

Ho can i use it in I'm using v-tables-3 package that works with vue 3. same approach i used in v-server-table it doesn't work any idea, if you can help much aprreciated.

@ahmedrazaa It work only with vue-tables-2. Thank you