Please look the below image

[![enter image description here](https://i.stack.imgur.com/ZjR6I.png)](https://i.stack.imgur.com/ZjR6I.png)

I have two users and their allowed channels.

***My issue is :***

When I click one channel of a user, the same channel is also get checked of other user. For example:
When I click *Commissions* of user *Deepu*, the channel *Commissions* of user *Midhun* also get checked.
I have to avoid that, the clicked channel of the user should only selected, not other user's.

**I tried this**

```
<v-data-table
                :headers="headers"
                :items="UserChannels"
                :loading="datatableloading"
                class="elevation-1"
              >
                <template v-slot:items="props">
                  <td class="text-xs-left">{{ props.item.username }}</td>
                  <td class="text-xs-left">
                  <ul class="channel-listitems">
                    <li v-for="item  in Channels">
                    <input type="checkbox" class="channel-checkbox" :value="item.id" v-model="checkedChannels">
                      {{ item.channel_name }}
                    </li>
                  </ul>
                  <br>
                  <span>Checked names: {{ checkedChannels }}</span>
                  </td>
                </template>
              </v-data-table>

```

I am using **Vue.js** for doing this.