[Vuejs]-How to collect selected options data from multiple q-radio groups

const { ref } = Vue

const app = Vue.createApp({
  data () {
    return {
      modelOptions: [],
      boxs:[
        {
          id: 1,
          name: 'Group one',
          options: [
             {optionName: 'A1', id: 1},
             {optionName: 'A2', id: 2},
             {optionName: 'A3', id: 3},
          ]
        },
        {
          id: 2,
          name: 'Group two',
          options: [
             {optionName: 'B1', id: 10},
             {optionName: 'B2', id: 11},
             {optionName: 'B3', id: 12},
          ]}
      ]
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script>
<div id="q-app" style="min-height: 100vh;">
  <q-list>     
    <q-card
        v-for="(item, i) in boxs"
        :key="i"
        class="q-mt-xl"
        flat
        bordered
        square
      >
       <q-toolbar class="bg-blue-1 q-px-md q-py-xs text-bold">
         {{item.name}}
        </q-toolbar>
        <q-list
          class="fit"
          v-for="(option, index) in item.options"
          :key="index"
        >
          <q-item tag="label" v-ripple>
            <q-item-section avatar>
              <q-radio v-model="modelOptions[i]" :val="option" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ option.optionName }} </q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </q-list>
    <div class="q-pa-sm q-mt-sm">
      Your selection is: <strong>{{ modelOptions }}</strong>
    </div>
  </div>

</div>