Binding a Vue/Antd radio button group fails to apply styles

I'm building a small Vue component. When I write out the HTML for a radio button group, it works perfectly.

I then changed the code to bind to a data source and that worked, BUT, it lost its styling.

<template>
  <div>

      <!-- This group does not apply the button style -->
      <a-radio-group default-value="A" button-style="solid" :options="data" />
      

      <!-- This group applies the button style perfectly -->
      <a-radio-group default-value="A" button-style="solid">
        <a-radio-button value="a">
          A
        </a-radio-button>
        <a-radio-button value="b">
          B
        </a-radio-button>
        <a-radio-button value="c">
          C
        </a-radio-button>
        <a-radio-button value="d">
          D
        </a-radio-button>
      </a-radio-group>
  </div>
</template>
<script>
const data = [{
  value: 'A',
  label: 'A',
  disabled: false,
}, {
  value: 'B',
  label: 'B',
  disabled: false,
}, {
  value: 'C',
  label: 'C',
  disabled: true,
}, {
  value: 'D',
  label: 'D',
  disabled: true,
}]

export default {
  name: 'SystemSelector',
  data() {
    return {
      data,
    }
  },
  mounted() {
  },
}
</script>

Using the above code, both radio button groups contains items A to D. Both lists have item A selected by default. The first list is rendered as "normal" radio buttons while the second list is rendered as "tabs" due to the "solid" style being applied.

Why does my first radio button group not apply the same style successfully?

Solution

It isn't perfect, but this got me most of the way there:

    <template>
      <div>
          <a-radio-group name="SourceSystem" default-value="XXX" @change="onChange" v-
    
        model="selectedSystem" button-style="solid">
                <a-radio-button
                   v-for="(item, index) in data"
                   :key="index"
                   :value="item.value"
                   v-on="{ defaultChecked: item.value==='XXX' ? true : false}"
                   :disabled="item.disabled">
                   {{ item.label }}
                </a-radio-button>
              </a-radio-group>
          </div>
        </template>

It's a bit of a copout, since I've basically resorted to drawing the list almost by hand.

The default-value selection still doesn't work perfectly (it doesn't select a default at page-load time), but at least it renders the list the way I wanted it to.