无法撤消，就像不喜欢 Vue 2 组件一样

问：

喜欢不喜欢的组件

• 我在让它按预期工作时遇到了一些麻烦，完全可以使用一些帮助
• 要求
  • 当没有选择任何内容并且我点击喜欢时，它应该选择“喜欢”组件
  • 当选择了不喜欢并且我点击喜欢时，它应该选择“喜欢”组件
  • 当已经选择了 like 并且我点击了 like，它应该取消选择“Like”组件
• 上面的第三个要求目前对我不起作用
• 这是 CODESANDBOX 的链接，这里是组件代码

我正在使用 nuxt 2、fontawesome 图标和 buefy，如果有帮助的话

<template lang="pug">
section
  b-field
    b-radio-button(
      v-model="radioButton",
      @click.native="unselect",
      native-value="like",
      type="is-success is-light is-outlined",
      size="is-small"
    )
      b-icon(icon="thumbs-up")
      span Like
    b-radio-button(
      v-model="radioButton",
      @click.native="unselect",
      native-value="dislike",
      type="is-danger is-light is-outlined",
      size="is-small"
    )
      b-icon(icon="thumbs-down")
      span Dislike
</template>

<script>
export default {
  data() {
    return {
      radioButton: "",
    };
  },
  methods: {
    unselect(event) {
      this.$nextTick(() => {
        const label = event.target?.innerText?.toLowerCase();
        console.log(this.radioButton, label);
        if (this.radioButton === label) {
          this.radioButton = "";
        }
      });
    },
  },
};
</script>

• 如果有经验的人能告诉我哪里出了问题，那就太好了