VueJS [email protected] Component v-model does not update parent initially

I have a parent child component setup to test v-model. The child updates parent when you enter a value but not initially.

parent:

<script setup>

import { ref } from 'vue';

import TextInput from './TextInput.vue';

const size = ref(1);
const color = ref('red');
</script>

<template>

  <TextInput v-model:size="size" v-model:color.capitalize="color" />
  <div :style="{ fontSize: size + 'em', color: color }">
    <!-- Question 1: this line shows "red" but "Red" is what I want initially -->
    <p>{{ size }} {{ color }}</p>
  </div>

</template>

child: TextInput.vue

<script setup>
import { ref } from 'vue';

const size = defineModel('size');

const [color, modifier] = defineModel('color', {
  set(value) {
    if(modifier.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
    return value;
  },
  //only this forces color to upper case on start in the input
  get(value) {
    if(modifier.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
    return value;
  }
});

</script>

<template>
  <input v-model="size">
  <input v-model="color">
</template>

Question 2:
If I omit “color” in defineModel(“color”, {…, I get the following error

[Vue warn]: Extraneous non-props attributes (color, colorModifiers) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

at <TextInput size=1 onUpdate:size=fn color="red"  ... > 
at <ComponentVModel> 
at <App>

If I keep just the

<input v-model="color">

line, to make it not a fragment, it doesn’t update at all.