vue CheckBox全选全取消功能代码

<template>
    <div class="conter">
        <div class="table-data" style="margin:0px; width: 800px;">
            <table class="table-group panel-6">
                <thead class="block-header">
                    <tr>
                        <th><input id="allChecked" type="checkbox" 
                        v-model="allChecked" @change="changeAllChecked">全选</th>
                        <th>标题</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="item in list">
                        <tr>
                            <td><input type="checkbox" 
                            v-model='checkedItems' :value="item.id"></td>
                            <td>{{item.title}}</td>
                        </tr>
                    </template>
                </tbody>
            </table> 
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            allChecked:false,
            checkedItems:[],
            list:[
                {"id": "1","title": "标题一"},
                {"id": "2","title": "标题二"}, 
                {"id": "3","title": "标题三"}
            ]
        }),
            
        watch: {
            "checkedItems": function() {
                if (this.checkedItems.length == this.list.length) {
                    this.allChecked = true
                } else {
                    this.allChecked = false
                }
            }
        },
        methods: {
            changeAllChecked() {
                if (this.allChecked == true) {
                    this.checkedItems = [];
                    for (var i = 0; i < this.list.length; i++) {
                        this.checkedItems.push(this.list[i].id);
                    }
                } else {
                    this.checkedItems = [];
                }
            },
        }
    }
</script>