How can I make sure that only one checkbox is selected?

Question

Vue.js

Good afternoon, how can I make sure that only one checkbox is ticked when clicked, and the rest of the checkboxes are unchecked. Thanks in advance

<div id="app">
   
  <input type="checkbox" id="jack" value="Джек" v-model="checkedNames">
  <label for="jack">Джек</label>
  <input type="checkbox" id="john" value="Джон" v-model="checkedNames">
  <label for="john">Джон</label>
  <input type="checkbox" id="mike" value="Майк" v-model="checkedNames">
  <label for="mike">Майк</label>
  <br>
  <span>Отмеченные имена: {{ checkedNames }}</span>

</div>
        
   <script>
       new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})
   </script>

Answer 1

data: () => ({
  checked: null,
  items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
}),

<label v-for="(n, i) in items">
  <input
    type="checkbox"
    :checked="checked === i"
    @change="checked = $event.target.checked ? i : null"
  >
  {{ n }}
</label>

One thing is not clear - why do checkboxes do something that radio buttons did not please?