How to make a proper emit of the modelValue with vue3 using props?

Question

I'm expecting to pass the $event.target.value from the child compoenent first input to the optionsSkin key of the the parent component newSettings object and from the second input to parent's newSettings object - second key - optionsLeg. How can I bind each input to the inner object key ?

    // Parent
    <template>
        <ChartSettings :default="chartSettings" :modelValue="newSettings" />
    </template>

    <script>
    export default {
      data() {
        return {
          newSettings: {
            optionsSkin: '',
            optionsLeg: []
          }
        }
      }
      components: {
        ChartSettings,
      },
    };
    </script>

    // Child
    <q-option-group
      :options="settings.optionsSkin"
      type="radio"
      @input="$emit('update:modelValue', $event.target.value)"
    />
    <q-option-group
      :options="settings.optionsLeg"
      type="checkbox"
      :toggle-indeterminate="false"
      @input="$emit('update:modelValue', $event.target.value)"
    />

    <script>
    export default {
      props: ['modelValue'],
    };
    </script>

Answer 1

have a demo for you https://play.vuejs.org/#eNqVVMFu2zAM/RVBKOAEyBwMvXlesW7IYcPQFct2inowEiZ1a0uCRLkpAv/7KGl2nMJN0Vxi8/GJj4+UD/xa67RxwDMupJAst2tTaryix7LWyiD7a8HcFDWwrVE1S9J5F/C0hPIY7EPiBraFq5AdfMz/NgUWk+nxnTED6IwcRhiT8LQExFLubHaKMKY0lkra5WMpM5Yks1H0J+wytrobYu3xpX9se/ZaUWcSJJ4W7Prq8zpG+yn+5/PeHCFzhFpXBYK3iuX3H68Oh2Ev6UA7a1s2jpJ2AvM50cMxnYZYsPlQqw1U2eCoz4K/UkTQAEdIVGGcQ0CkzKl0Pu/b4TM+nDAtxv+dYJampymZBl1KuDVK20nw72RMSzRUJlg3HNC1McWzkO3UmxdPWNQl2skqcZo2BYZdJjP2IkpnJHfEPTeDUmqH0QR81kBtI+yx8yVrisr54IhnXwKVsAsgTZNxRRfQ0M6kWJgdYBpOmx4dfHf93v+3yvvWZ2w1Up4MeWWCaNdKbstd+mCVpBGGMQnuN7+swPyKJwveXwDBi6pSTz9CDI3rbgFx7mH9OBJ/sHsfE/zWAO1LA4L3WBQZ4cXyJrjQg7SerqLsM+BvsKpyXmNM++rkhmQP8oLa7+ELRdv2xy72CNJ2TXmhPjPeYMFpj7+daf0o9zK9DDxaVN7+A0Derz4=

you can use https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings for your case