Proposal: propsToModels()

[Vasile-Peste]

The idea is that defineProps() should actually return a mutable copy of the actual props, with listeners on them automatically emitting when the props copies are modified or when the original props are modified.

The API would be something like propsToModels()

/*
 * Used to create mutable refs from props, with reactive two way binding
 */
export function propsToModels (props, emit) {
    const refs = {};
    let propsCache = cloneDeep(toRaw(props));

    for (const propName of Object.keys(props)) {
        const propMirror = ref(reactive(cloneDeep(props[propName])));

        watch(propMirror, (value) => {
            emit(`update:${propName}`, cloneDeep(value));
        }, {
            deep: true,
        });

        refs[propName] = propMirror;
    }

    watch(props, (value) => {
        for (const propName of Object.keys(props)) {
            const cachedValue = JSON.stringify(propsCache[propName]);

            if (cachedValue !== JSON.stringify(props[propName])) {
                const newValue = cloneDeep(toRaw(value[propName]));

                refs[propName].value = newValue;
                propsCache[propName] = newValue;
            }
        }
    }, {
        deep: true,
    });

    return refs;
}

This is a rough implementation and can be improved a lot

This solves the issue and need of having to create a local copy of the prop and listening to its mutations in order to update the real prop. It's particularly useful when dealing with nested v-model props and when props are objects.

An example

const props = defineProps({
    workspace: {
        type: Object,
        required: true,
    },
});
const {
    workspace,
} = propsToModels(props, emit);

// Now we can do <MyComponent v-model="workspace"/>
// and even
// <MyComponent v-model="workspace.property.property.property"/>

Now workspace can be deeply used with v-model by child components and so on. Mutating workspace will trigger an emit which will update the real workspace prop. If the workspace prop is mutated by parent or other component, the local copy will be updated too and remain mutable.

[posva]

It seems that you are looking for defineModel()

[Vasile-Peste]

defineModel() doesn't work when using v-model on nested object properties
See also https://github.com/orgs/vuejs/discussions/10538

<script setup>
import GrandChild from "./GrandChild.vue";

const model = defineModel();
</script>

<template>
  <div>
    <h3>Component</h3>
    a: <GrandChild v-model="model.a" /><br />
    b: <GrandChild v-model="model.b" />
  </div>
</template>

This doesn't trigger the emit and actually mutates the prop

[nickmessing]

In my example link you can check BigComponent.vue for a usage example

[Vasile-Peste]

Thank you, however what we need is having it deep, as you mentioned. And I totally agree it's expensive, however on large scale applications with dozens of nested components, this feature would be necessary.

[nickmessing]

You can implement that in userspace, using proxy.
It's not a widespread usecase with way too big of a potential performance impact and to be honest it feels like an anti-pattern to me.
If I ever need something like this I'd rather make a utility extracting a single key like:

<script setup lang="ts">
const model = defineModel<MyObject>({ required: true })
const myField = useReactiveKey(model, 'key')
</script>
<template>
  <Something v-model="myField" />
</template>

since this is both explicit, easy to read/maintain/test and no significant impact on performance.

[jaypeerj]

You can implement that in userspace, using proxy. It's not a widespread usecase with way too big of a potential performance impact and to be honest it feels like an anti-pattern to me. If I ever need something like this I'd rather make a utility extracting a single key

good suggestion, deep computed getters/setters are pretty good for this too. it can depend on what is known at runtime. if you have a lot of keys you're obviously going to end up with a lot of extra code (whether that's a series of variable definitions or some kind of indexed collection/Object/etc.)

[alex-springer-sr]

Destructuring an object into reactive computeds should not be part of the framework, and any tool that can do it will have edge cases, you can easily solve this in user space if you are okay with the limitations like in this example
@nickmessing could you elaborate on the edge cases and limitations of the example you provided?
I can only think of:

• not handling deep mutations
• all properties need to be defined from the start
  which i am perfectly fine with for my use cases.

[edison1105]

It seems that you need https://vueuse.org/core/useVModels/

[nickmessing]

That makes a vModel for each prop, author wants vModels for each key of each prop, and then recursively deeper

[jacekkarczmarczyk]

There's https://vueuse.org/core/useVModel/ with deep option

[Vasile-Peste]

Yes! It would be great if Vue would support a defineModel() with deep option too

[jaypeerj]

buried in the UseVModelOptions d.cts is a bit more info telling you what you'll need

the below works as desired with props:

// note: passive needs to be true in my experience, be mindful that this uses a watcher under the hood
const d_foo = useVModel(
    props, 'foo', emit, { clone: cloneDeep,  passive: true,  deep: true })

here I'm using lodash's cloneDeep as my cloning algorithm. adjust as you see fit.

[michaelcozzolino]

i made a similar proposal, with a different api that leverages proxies and directives to solve the same thing
#751