Vuejs Checkbox Array

I have an array of menus with roles like this

d_active: 0
href: "/main-clients"
icon: null
id: 155
menu_actions: 1
menu_id: 1
name: "Clients"
parent_id: 173
roles: [{id: 1, name: "admin", guard_name: "web", created_at: "2021-10-18T08:51:20.000000Z",…},…]
0: {id: 1, name: "admin", guard_name: "web", created_at: "2021-10-18T08:51:20.000000Z",…}
1: {id: 6, name: "dev", guard_name: "web", created_at: "2021-11-15T11:16:21.000000Z",…}
sequence: 408
service_id: null
slug: "link"

and also i have array of actions like this

actions: [{id: "1", name: "Edit"}, {id: "2", name: "View"}, {id: "3", name: "Add"}, {id: "4", name: "Delete"}]
0: {id: "1", name: "Edit"}
id: "1"
name: "Edit"
1: {id: "2", name: "View"}
2: {id: "3", name: "Add"}
3: {id: "4", name: "Delete"}

i then tried to loop it using v-for like this

<tr v-for="role in menu.roles" v-bind:key="role.id">
    <td>{{role.name}}</td>
    <td v-for="action in actions" :key="action.id">
   <input type="checkbox" :value="action.id" v-model="form.actions">
    </td>
</tr>  

The problem is that anytime i click one check box 2 or more get clicked which is not what i want. What i want is to be a able to click one checkbox and also submit it to the API responsible.