select all checkboxes in vuejs

I am stuck in problem I want to select all checkboxes when I click first checkbox on click, I am following this aritcles: https://codepen.io/jh-thank-you/pen/qjVWOj?editors=1010

My View:

            <tr v-for="user in paginatedUsers" :key="user.id">
            <td>
                <input type="checkbox" v-model="userIds" :value="user.id">
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

My table head:

<thead>
            <tr>
                <td>
              <input type="checkbox" @click="selectAll" v-model="allSelected">

                </td>
               
            </tr>
            </thead>

My script:

     selected: [],
allSelected: false,
userIds: [],
methods: {
    selectAll: function() {
        this.userIds = [];

        if (this.allSelected) {
            for (user in this.users) {
                this.userIds.push(this.users[user].id.toString());
            }
        }
    }
 },

I have also attaced the screen shot of my required output when i click on top check box i want to show all checkboxes selected. I really need your help I am stuck in this issue since a couple of days. Thanks in advance