support for a native equivalent to vueuse's useVModel

[jaypeerj]

Hey folks,

As it stands, defineModel causes prop mutation if supplied an object.

There are occasions when a stand-alone component is best supplied a v-model object that doesn't use Pinia/Vuex/provideInject/etc. Whether because you work with a software house that has shared apps or are delivering a 3rd party component of some stripe.

I've written about object handling with v-model on reddit and stackoverflow (both found via this stack overflow)

I think the native environment ought to extend defineModel to behave something along the lines of:

const props = defineProps({
  foo: {
    type: Object,
    required: true,
  })

const emit = defineEmits(['update:foo'])
const foo = useVModel(props, 'foo', emit, { deep: true, passive: true, clone: structuredClone }) // structuredClone|  _.cloneDeep | etc. etc.

effectively the interface could behave much like the options of a watcher

{ deep: true, clone: true ... }

I sorely think the core docs need to talk through strategies for managing objects in v-model, either way. I have seen too many instances to mention of client developers accidentally mutating props.