How can I make it so that when clicking on the first checkbox, the subsequent ones would be blocked?

Question

Vue.js

Good afternoon) Please help with the task) It is necessary that when you click on the first checkbox, the other two are blocked

<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>

Answer 1

It is possible to communicate components through an event bus .
Or through a common parent .