title: Issue VueJS Radio Button Group with custom component and Composition API
body: <p>I'm looking for an example on how to code a custom component that displays a number of options as radio buttons (passed as props to the custom component), of which only one radio button is selected at the time and with two-way binding.
  I also need this using the Composition API.</p>
  <p>I have this custom component at the moment:</p>
  <pre><code>&lt;template&gt;
      &lt;Label :label=&quot;fieldLabel&quot; :required=&quot;required&quot; /&gt;
      &lt;div v-for=&quot;item in items&quot; :key=&quot;item.id&quot;&gt;
          &lt;input type=&quot;radio&quot; :value=&quot;item.id&quot; @input=&quot;$emit('input:model', $event.target.value)&quot;&gt;
          {{ item.label }}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { db } from '@/firebase/config'
  import { onMounted, ref } from '@vue/runtime-core';
  
  import Label from './Label'
  
  export default {
      name: 'RadioInput',
      components: {
          Label
      },
      props: ['item', 'label', 'model', 'sortby', 'sortorder'],
      emits: ['input:model'],
      setup(props) {
          const fieldLabel = props.label ? props.label : null
          const item = props.item
          const items = ref([])
          const model = props.model;
          const required = props.required !== undefined ? props.required : false;
          const sortBy = props.sortby !== undefined ? props.sortby : 'label';
          const sortOrder = props.sortorder !== undefined ? props.sortorder : 'asc';
  
          onMounted(() =&gt; {
              // Get the collection from firestore
              db.collection(item).orderBy(sortBy, sortOrder).get()
                  .then(res =&gt; {
                      items.value = res.docs.map(doc =&gt; {
                          return { ...doc.data(), id: doc.id }
                      })
                  })
          })
  
          return { fieldLabel, items, model, required }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>The items are fetched from a Firebase collection, which works perfectly fine. My issue is that I can check all radio buttons individually and they all stay checked. And the selected value is not bound.</p>
  <p>An example of the use of the custom radio group input component I have is like this:</p>
  <pre><code>&lt;RadioInput :label=&quot;'Commercial Status'&quot; :item=&quot;'commercial_status'&quot; :sortby=&quot;'sort_order'&quot; :sortorder=&quot;'asc'&quot; v-model:model=&quot;commercialStatusId&quot; :required=&quot;false&quot; /&gt;
  </code></pre>
  <p>The result before selection looks like this:</p>
  <p><a href="https://i.stack.imgur.com/tHhR4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tHhR4.png" alt="enter image description here" /></a></p>
  <p>But then I can check all radio buttons, and only one should be checked at the same time:</p>
  <p><a href="https://i.stack.imgur.com/RyxAv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RyxAv.png" alt="enter image description here" /></a></p>