Vuetify Checkbox Check All | Uncheck All Example

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <v-app>
            <v-container>
                <h3>Vuetify Checkbox Select All | Unselect All</h3>
                <v-row>
                    <v-col class="form-check">
                        <v-checkbox v-model="checkAll" label="Select all" id="selectAll"></v-checkbox>
                    </v-col>
                </v-row>

<v-row>
                    <v-col v-for="c in country" :key="c.id">
                        <v-checkbox v-model="checked" :value="c.countryName" :label="c.countryName"
                            :id="c.id"></v-checkbox>
                    </v-col>
                </v-row>

<v-row>
                    <p>Checked Value: {{ checked }}</p>
                </v-row>
            </v-container>
        </v-app>
    </div>
    <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    country: [
                        { id: '5', countryName: 'CANADA' },
                        { id: '6', countryName: 'GERMANY' },
                        { id: '7', countryName: 'FRANCE' },
                        { id: '8', countryName: 'BRAZIL' },
                        { id: '9', countryName: 'JAPAN' },
                        { id: '10', countryName: 'CHINA' },
                    ],
                    checked: []
                };
            },
            computed: {
                checkAll: {
                    get() {
                        return this.country ? this.checked.length === this.country.length : false;
                    },
                    set(value) {
                        if (value) {
                            this.checked = this.country.map((c) => c.countryName);
                        } else {
                            this.checked = [];
                        }
                    }
                }
            }

})
    </script>
</body>

</html>