Why can't I toggle the radio button

Question

I'm expecting to toggle the radio button, respectively, to toggle the parent's component state via emit using Multiple v-model bindings with Quasar. But I see nothing toggling now. I'm getting the initial state values from the data file where the selected radio button is selected by default. I think I'm getting the emits wrong and not passing the state data correctly to the parent component.

// data js file

function getDefaultChartSettings () {
  return {
    skin: 'Bricks',
    options: ['Scheduled', 'Actual']
  }
}

function getSkinOptions () {
  return [
    {
      alias: 'bricks',
      title: 'Bricks'
    },
    {
      alias: 'brackets',
      title: 'Brackets'
    }
  ]
}

function getLegOptions () {
  return [
    {
      alias: 'scheduled',
      title: 'Scheduled'
    },
    {
      alias: 'actual',
      title: 'Actual'
    }
  ]
}

export { getDefaultChartSettings, getSkinOptions, getLegOptions }

// Parent component

<template>
  <q-page class="flex">
    <ChartSettings
      :default="chartSettings"
      v-model:optionsSkin="newSettings.optionsSkin"
      v-model:optionsLeg="newSettings.optionsLeg"
    />
  </q-page>
</template>

<script>
import ChartSettings from '../components/drafts/ChartSettings.vue';
import { getDefaultChartSettings } from '../modules/helpers/drafts/charts.js';

export default {
  data() {
    return {
      newSettings: {
        optionsSkin: '',
        optionsLeg: [],
      },
      chartSettings: {
        skin: '',
        options: [],
      },
    };
  },
  components: {
    ChartSettings,
  },
  created() {
    this.chartSet();
  },
  methods: {
    chartSet() {
      this.chartSettings.skin = getDefaultChartSettings().skin;
      this.chartSettings.options = getDefaultChartSettings().options;
    },
  },
};
</script>

// child component
<template>
  <div class="wrapper">
    <h5>Chart Settings</h5>
    <div class="q-gutter-md">
      <q-option-group
        :options="settings.optionsSkin"
        :value="optionsSkin"
        type="radio"
        @input="$emit('update:optionsSkin', $event.target.value)"
      />
      <q-option-group
        :options="settings.optionsLeg"
        :value="optionsLeg"
        type="checkbox"
        @input="$emit('update:optionsLeg', $event.target.value)"
      />
      <q-btn
        v-if="enableApply"
        color="primary"
        label="Apply"
        :size="md"
        @click="apply"
      />
    </div>
  </div>
</template>

<script>
import {
  getSkinOptions,
  getLegOptions,
} from '../../modules/helpers/drafts/charts.js';
export default {
  props: {
    default: {
      type: Object,
      default: () => ({ skin: '', options: [] }),
    },
    modelValue: {
      type: Object,
      default: () => ({ optionsSkin: '', optionsLeg: [] }),
    },
  },
  emits: ['update:optionsSkin', 'update:optionsLeg'],
  data() {
    return {
      enableApply: true,
      settings: {
        optionsSkin: [],
        optionsLeg: [],
      },
      newSettings: {
        optionsSkin: '',
        optionsLeg: [],
      },
    };
  },
  created() {
    this.setDefaultSettings();
    this.setSkinOptions();
    this.setLegOptions();
  },
  methods: {
    setDefaultSettings() {
      this.newSettings.optionsSkin = this.default.skin;
      this.newSettings.optionsLeg = this.default.options;
    },
    setSkinOptions() {
      const skinOptions = getSkinOptions();
      this.settings.optionsSkin = skinOptions?.length
        ? skinOptions.map((sO) => ({ label: sO.alias, value: sO.title }))
        : [];
    },
    setLegOptions() {
      const legOptions = getLegOptions();
      this.settings.optionsLeg = legOptions?.length
        ? legOptions.map((lO) => ({ label: lO.alias, value: lO.title }))
        : [];
    },
    apply(e) {
      this.$emit('apply-button-click', e.target.value);
    },
  },
};
</script>