Реализация RadioButtonGroup на Vue 3

Пробую сделать релизацию группы компонентов по подобию фреймворков

      <BaseRadioGroup v-model="input_value" name="gender">
        <BaseRadioItem label="Мужской" value="man"   />
        <BaseRadioItem label="Женский" value="woman" />
      </BaseRadioGroup>
      <p>Value: {{ input_value }}</p>

BaseRadioGroup.vue

<template>
  <div class="radio-container">
    <slot></slot>
  </div>
</template>
<script setup>
import {defineProps} from "vue";

defineProps({
  name: String,
})
</script>

В сам слот пробовал передать name, но он считает что это название слота, также пробовал через v-bind="$attrs", ничего не получается.

BaseRadioItem.vue

<template>
  <label>
    <input :checked="checked"
           :name="name"
           :value="value"
           type="radio"
           @change="handleChange">
    <slot><span v-html="label"></span></slot>
  </label>
</template>

<script setup>
import {computed, defineEmits, defineProps} from "vue";

const props = defineProps({
  name: String,
  value: String,
  label: String,
  modelValue: String,
})
const checked = computed(() => props.value === props.modelValue);
const emit = defineEmits(['update:model-value'])
const handleChange = event => emit('update:model-value', event.target.value);
</script>

Получить название группы удалось только через $parent.$attrs, но только в шаблоне, и, кажется, это плохая практика использовать $parent.