How to implement select-all records for header checkbox in vue-table-with-tree-grid?

Question

I am trying to trigger a check/uncheck event for the checkbox in the header for vue-table-with-tree-grid component. The checkbox for the rest of the body of the table is working fine with checkbox-click. But I have not found any checkbox event as above mentioned in the header section of the table so that I can count the number of records selected.

Here below is the code

Vue file

    <zk-table
      ref="table"
      sum-text="sum"
      index-text="#"
      :data="reportInvoiceByProject"
      :columns="projectColumns"
      :stripe="props.stripe"
      :border="props.border"
      :show-header="props.showHeader"
      :show-summary="props.showSummary"
      :show-row-hover="props.showRowHover"
      :show-index="props.showIndex"
      :tree-type="props.treeType"
      :is-fold="props.isFold"
      :expand-type="props.expandType"
      :selection-type="props.selectionType"
      @checkbox-click="rowClick()"
      @on-header-checkbox-change="rowClick()"
    >

JS file

    rowClick(){
      this.selectedReportsLength = this.$refs.table.getCheckedProp("id").length;
      this.selectedReports = this.$refs.table.getCheckedProp("id");
    },

Is there any event already mentioned in vue-table-with-tree-grid component or Is there any other way to implement the above mentioned feature here? Please guide me through this. Thank you in advance

I have tried this event so far

@on-header-checkbox-change="rowClick()"