Vue 3 datatable plugin how to add action buttons?

I am using vue3 and laravel inertia for this project. How do I add a custom action button in the last column? Currently I tried by doing and the handleUser() function isnt working or triggering, i got only a console.log there.

jquery datatables for vue 3

const { users } = defineProps({
    users: Object
})

const usersData = computed(() => {
    return toRaw(users).map(user => {
        return [
            user.id_number,
            user.name,
            user.email,
            user.course.name,
            user.school_year,
            user.subject_code,
            user.phone_number,
            user.is_active ? `<span class="badge rounded-pill text-bg-primary">Approved</span>` : `<span class="badge rounded-pill text-bg-danger">Pending</span>`,
           `<button class="btn btn-sm btn-primary" @click="handleUser(user)">Approve</button>`
        ];
    });
})

My datatable component

                        <DataTable :data="usersData" class="display" ref="table">
                            <thead>
                                <tr>
                                    <th>Id Number</th>
                                    <th>Student Name</th>
                                    <th>Email</th>
                                    <th>Program</th>
                                    <th>School Year</th>
                                    <th>Subject Code</th>
                                    <th>Phone</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </DataTable>

my table display

Maybe did something wrong by converting the user props to usersData? since its reactive I cant display the users to the datatable so I converted it.