Button inside RadioGroupOption?

[dospunk]

Is it possible to put a button inside a RadioGroupOption that won't select the RadioGroupOption when it is clicked?

I have a setup like this:

<RadioGroup
  v-model="selectedCard"
>
  <RadioGroupOption
    v-for="card in cardsList"
    :key="card.id"
    v-slot="{ active, checked }"
    :value="card.id"
    as="template"
  >
    <div>
      <button
        type="button"
        @click="openCardMenu"
      >
        Open Card Options Menu
      </button>
      <RadioGroupLabel>{{card.number}}</RadioGroupLabel>
    </div>
  </RadioGroupOption>
</RadioGroup>

I've tried adding .prevent and .capture to my click event but nothing seems to work. And I can't just make it so that the button is outside the RadioGroupOption because of how it's supposed to display. Any ideas?

[dospunk]

Figured it out, I needed the .stop event modifier!