Jquery click event triggered twice in Vuejs

Question

I have a button in ajax mode datatable. A click event is attached with the button which further sends ajax to change the record. After that i have reloaded the table using

 this.table.ajax.reload();

The function is working fine also the table is perfectly updated the record but the click function triggered twice and sends ajax twice to update data.

     $('body').on('click', '.status-change', function(e) {
        this.changeStatus(e.target.dataset.itemStatus,e.target.dataset.itemId);
      });

if i attach unbind with body like:

$('body').unbind('click').on('click', '.status-change', function(e) {
        this.changeStatus(e.target.dataset.itemStatus,e.target.dataset.itemId);
});

Now the click event is triggering once. But there is no change in table. Table sends ajax to reload new Data. but table is not getting update.