Strange behaviour when iterating over a component containing the RadioButton component

[rependa]

I'm currently building a form, iterating over data and passing that data to a SFC that contains PrimeVue's RadioButton, and using slotted content to populate the label. While the result looks correct, the radio button behaviour is weird -- each radio button can be selected even though they all share the same value in the name attribute. I've tested my code swapping out the RadioButton component for a plain old html input radio element and that works as expected. What am I missing?

Parent component:

<template>

  <form>
    <IntakeRadioItem
      v-for="item in intakeOptions"
      :key="item.id"
      :id="item.id"
      :value="item.value"
    >
      <template #default>
        {{ item.title }}
      </template>
    </IntakeRadioItem>

  </form>

</template>

<script>
import IntakeRadioItem from '../components/IntakeFormItem2.vue'
export default {
  components: {
    IntakeRadioItem
  },
  data() {
    return {
      intakeValue: '',
      intakeOptions: [
        {
          title: 'Title 1', 
          id: '1',
          value: 'value01'
        },
        {
          title: 'Title 2', 
          id: '2',
          value: 'value02'
        },
        {
          title: 'Title 3', 
          id: '3',
          value: 'value03'
        },
      ]
    }
  }
}
</script>

Child component:

<template>
  <p>
    <RadioButton v-model="intakeValue" :inputId="id" name="initialRadio" :value="value" />
    <!-- <input type="radio" v-model="intakeValue" :id="id" name="initialRadio" :value="value" /> -->
    <label :for="id">
      <slot></slot>
    </label> 
  </p>
</template>

<script>
export default {
  props: ['id','value'],
  data() {
    return {
      intakeValue: ''
    }
  },
}
</script>

[tugcekucukoglu]

Different behaviors are so obvious. Thanks for the example. I'll dive into it.