Composition Api, setup, TS. Как переключать радиобаттоны?

Есть массив:

const users = [
    { name:'Tom', checked: true},
    { name:'Bob', checked: false},
    { name:'Sam', checked: false}
];

В цикле выводятся компоненты рабиобаттоны:

  <template v-for="user in users">
    <Radio
      :label="user.name"
      :value="user.name"
      :checked="user.checked"
    />
  </template>

Radio.vue:

<template>
    <label
        class="radio"
    >
        <input
            type="radio"
            class="radio__input"
            :value="label"
            :checked="checked"
        >
        <span
            v-html="label"
        >
        </span>
    </label>
</template>

<script setup lang="ts">

interface Props {
    label: string;
    value: boolean;
    checked: boolean;
}

const props = defineProps<Props>();

</script>

Компоненты отрисовываются, и нужный элемент чекнут:

Компоненты отрисовываются, и нужный элемент чекнут:

Подскажите, как правильно реализовать переключение элементов? Сейчас при клике на каждый - выбирается каждый:

введите сюда описание изображения


Ответы (0 шт):