Such as in the following example:

    <GroupCard
      v-for="(group, i) in groups"
      :key="group.groupName"
      v-model="groups[i]"
      :available-samples
      class="min-h-[216px] min-w-[296px]"
      @remove-group="groups.splice(i, 1)"
    />

each groups[i] itself is a nested object of type

{
    groupName: string;
    sampleNames: string[];
}

groups is a ref (actually a v-model itself, which originates from the form state of a form).

The GroupCard modifies the groupName and the sampleNames fields of the group prop it receives. The reactivity works and the form state in parent components gets updated correctly.

However, the GroupCard never emits onUpdate:modelValue, because the object reference never changes, but instead the object is modified. One downside I see is that this does not allow us to listen to function calls on the emit in unit tests.

An alternative that would only have slightly more lines of code would be to define 2 named models. One for the group name and one for the samples.