两个复选框，一个选中或另一个选中，而不是两个都选中，在vue.js中是怎么回事？

<template>
  <div>
    <input type="checkbox" v-model="checkbox1" @click="handleCheckbox1Click"> 复选框1
    <input type="checkbox" v-model="checkbox2" @click="handleCheckbox2Click"> 复选框2
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox1: false,
      checkbox2: false
    }
  },
  methods: {
    handleCheckbox1Click() {
      this.checkbox2 = false;
    },
    handleCheckbox2Click() {
      this.checkbox1 = false;
    }
  }
}
</script>