Not able to undo like in this like dislike Vue 2 component

Question

like dislike component

• I am having some trouble getting this to work as expected and could totally use some help
• Requirements
  • When nothing is selected and I hit like, it should select the "Like" component
  • When dislike is selected and I hit like, it should select the "Like" component
  • When like is already selected and I hit like, it should unselect the "Like" component
• The 3rd requirement above is not working currently for me
• Here is a LINK TO CODESANDBOX and here is the component code

I am using nuxt 2, fontawesome icons and buefy if that helps

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

• Super appreciate if someone more experienced can tell me where I am going wrong