defineModel() with objects should return a Proxy that emits 'update:modelValue' on property changes.

[Pentadome]

The problem

defineModel with objects currently does not work as many people expect (vuejs/core#11376, vuejs/core#10538). Changing a property on the model's object mutates the object instead of firing 'update:modelValue` with a new updated object.

To use models with object correctly, you must do the following:

<script setup lang="ts">
type MyObject = { 
    name: string,
    inner: { innerProp: number }
}

const props = defineProps<{modelValue: MyObject}>();

const emits = defineEmits<{ 'update:modelValue': [value: MyObject] }>()

</script>

<template>
  <!-- we cant use v-model here without mutating the prop -->
  <MyChildComp
    @update:modelValue="value => {
        const clone = structuredClone(modelValue);

        clone.inner.innerProp = value;
        $emit('update:modelValue', clone)
    }"
    :modelValue="modelValue.inner?.innerProp"
  />

</template>

This is both cumbersome and error prone.

Right now, defineModel can not be used with objects while following vue's own best pratice of not mutating props.

Proposal

defineModel should return a proxy that calls 'update:{model-name}'.

Pseudo-code:

function createObjectModelProxy(value: object, upperSetter: (value) => void) {

  return new Proxy(value, {
      get: (target, property, proxy) => {
        if (typeof target[property] === 'object') {
          // probably want to use caching here
            return createObjectModelProxy(target[property], (value) => proxy[property] = value)
        }
        else return target[property];
      },
      set: (target, property, value, proxy) => {
        upperSetter(Object.assign({}, target, { [property]: value} ))
      }
    })
}

// defineModel() {
// ....
if (TSType === TSObject) {
    return createObjectModelProxy(
      model,
      (value) => emit('update:modelValue', value)
    )
}

// ...