Checkable change event

[mhelaiwa]

I have a toggle inside a column of vuetiful datatablelistening to its changeevent. I want to it when changed to send a request to the back-end to store the change in the database. The problem is the change event triggered multiple times when I bind the datatable with new data in the mounted function. This will make a request for every toggle in the datatable at the beginning. Any way to overcome this problem? thanks

Html:

<template slot="active" scope="cell">
   <toggle :change="toggle(cell.row)" :key="cell.row.id" :id="'toggle-'+cell.row.id" :value="cell.row" v-model="cell.row.active"></toggle>
</template>

Script:

<script>
export default {
   template: require('../../templates/permissions/roles.html'),
      components: {
         Modal, Popover
      },
      data(){
         return {
            tableData:[]
         }
      },
      mounted() {
         axios.get('/api/roles').then(({data}) => {
            this.tableData = data;
         });
      },
      methods:{
         toggle(row){
            console.log(row);
         }
      }
}
</script>