I have a dataTable component in my Vuejs application, that I use to display tables. It has a 'data' prop value that allows it to take the data to show in the table. here is how I call the component:

<aDataTable :data="sites">
        <template #columns> <!-- showing columns here --> </template >
        <template #rows> <!-- showing rows here --> </template >
<aDataTable>

I would like to be able to refresh the data when one of the column headers is clicked. I would like the sorting to be done on the server-side, hence why im doing it this way. This is kind of what I would like to do but not sure how

$('#data-table').on('order.dt', function () { 
       // gets the value of the header of the column and using to sort the data in the table
}

Any idea how one can do this?