How to make edit button works on click on datatables

Hello, I want to include a button that edits and deletes the data in data tables but the @click is not working in this way. Please help. Thanks!

    //Template
    <mdb-datatable responsive :data="data"/>

 //Script
    data() {
          return {
            columns: [{ field: "id", label: 'ID', sort: true } , { field: "name", label: 'Name', sort: true}, { field: "email", label: 'Email', sort: true }, { field: "action", label: 'Action', sort: true }],
        rows: []
      };
    },
    computed: {
      data() {
        return {
          columns: this.columns,
          rows: this.rows
        };
      },
    },
    methods: {
        loadUsers(){
            axios.get('api/users/')
            .then(res => {
                let keys = ["id", "name", "email","action"];
                let entries = this.filterData(res.data, keys);
                //rows
                entries.map(entry => this.rows.push(entry));
            })
            .catch(err => console.log(err));
            this.loading = false;
        },
        filterData(dataArr, keys) {
            let data = dataArr.map(entry => {
                let filteredEntry = {};
                keys.forEach(key => {
                    if (key in entry) {
                        filteredEntry[key] = entry[key];
                    }
                    if(key == 'action'){
                        filteredEntry[key] = '<button type="button" class="btn btn-indigo btn-sm m-0 " @click="editUserModal(item)"  >Edit</button> <button type="button" class="btn btn-red btn-sm m-0 ">Delete</button> ';
                    }
                });
                return filteredEntry;
            });
            // console.log(data)
            return data;
        },