Как сделать чтобы при клике на первый чекбокс, блокировались бы последующие?

<div id="app">
    
    <useredit></useredit>
    <userinfo></userinfo>
</div>
<script>

var eventBus = new Vue();
 
Vue.component('useredit', { 
    props: ["user"],
    template:  `<div>
                    <label v-for="n in items"> <input  v-model="n.checked" type="checkbox" :disabled="!block">
                </div>`,
    data() {
    return {
      items:[
        { value: [1, 1], checked: false, message: 'Шаблон'},
      ],
    }
  },
    methods:{
        block(){
            eventBus.$emit("userchange", this.items);
        },
    }
});
Vue.component('userinfo', { 
    props: ["user"],
    template: '<div><label v-for="n in items"> <input  v-model="n.checked" type="checkbox" :disabled="created"></div>',
    data() {
    return {
      items:[
        { value: [1, 1], checked: false, message: 'Шаблон', disabled: false},
        { value: [1, 1], checked: false, message: 'Шаблон', disabled: false},
        { value: [1, 1], checked: false, message: 'Шаблон', disabled: false},
      ],
    }
  },
    created(){
        eventBus.$on("userchange", (name)=>{
            this.items = !this.items;
        });
    }
});


new Vue({
    el: "#app",
    data:{
        
    }
});


</script>