2 way binding for nth level objects using reactive and proxies

[jaypeerj]

Start Date: (2025-08-06)
Target Major Version: (3.x)
Reference Issues: (fill in existing related issues, if any)
Implementation: stackBlitz

Summary

following on from #751 (reply in thread)

I re-emphasise the intention of @michal

At the moment Vue does not provide any way to update the property of an object passed through props by using v-model
without breaking the parent -> child data flow. Even by using defineModel in the child component.

put another way, true 2-way binding has been limited to primitives only.

Motivation

Composables, Pinia and/or vuex are all helpful for resolving complex state management. However, there are times where allowing the client developer to interface with a component that takes a complex object is useful (particularly for modular components that may be plug-and-play for a number of different projects/private module repos with agnostic components/etc.)

Proposal

The following uses native Proxies and vueJS' reactive method. It works with nth level objects and maintains 2 way binding.

The method computeDeepModel is passed the caller SFC's props, a key and the emit object. It carries the caveat of any tool that performs recursive operations on Nth dimension object; overhead. The proposal is that a modified version of the below (likely, without the alternative)

it could be added as a helper composable in the VueJS library

import cloneDeep from 'lodash/cloneDeep'
import set from 'lodash/set'

export const useDeepVModel = (props: Record<string, any>, propKey: string, emit: Function) => {
  /**
   * Creates a proxy-based model for deep objects, enabling direct access and two-way binding.
   * @param props - The props object passed to the component.
   * @param propKey - The key of the prop to be deeply modeled.
   * @param emit - The emit function to trigger updates.
   * @returns A proxy object with direct access to nested properties and emit support.
   */
  const computeDeepModel = (props: Record<string, any>, propKey: string, emit: Function) => {
    const createProxy = (target: any, parentPath: string = ''): any => {
      return new Proxy(target, {
        get (obj, key) {
          const path = parentPath ? `${parentPath}.${String(key)}` : String(key)
          const value = obj[key]

          if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
            // Recursively create proxies for nested objects
            return createProxy(value, path)
          }

          // Return primitive values directly
          return value
        },
        set (_, key, newValue) {
          const path = parentPath ? `${parentPath}.${String(key)}` : String(key)
          const updatedObject = cloneDeep(props[propKey])
          set(updatedObject, path, newValue)
          nextTick(() => {
            emit(`update:${propKey}`, updatedObject)
          })

          return true
        },
      })
    }

    // Wrap the props object in a proxy
    return createProxy(props[propKey])
  }

  let localItem = { 
    [propKey]: undefined,
  }

  watch(() => props[propKey], 
    (v) => {
      localItem[propKey] = computeDeepModel({ [propKey]: { ...v } }, propKey, emit) 
    }, { deep: true, immediate: true })

  return localItem
}

Example

Here is how the above could be used (i'm using unplugin hence no imports)

<template>
  <div>
    <Button @click="model.item.foo.bah.baz.test = ++model.item.foo.bah.baz.test">
      Child
    </Button>
    Child output:&nbsp;
    {{ model.item }}
  </div>
</template>

<script setup>
import { cloneDeep } from 'lodash'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
})


const emit = defineEmits([ 'update:item' ])
const model = useDeepVModel(props, 'item', emit)
</script>

and its parent

<template>
  <main>
    <h1>Parent</h1>
    <Button @click="item.foo.bah.baz.test = ++item.foo.bah.baz.test">
      Parent
    </Button>

    <Card class="m-3">
      <template #title> 2 way binding demo </template>
      <template #content>
        <div class="mb-3">(look for changes to foo.bah.baz.test)</div>

        <div class="mb-3">
          <strong>Parent output:&nbsp;</strong>
          {{ item }}
        </div>

        <div>
          <DeepModelTest :item="item" @update:item="updateItem" />
        </div>
      </template>
    </Card>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import DeepModelTest from './components/DeepModelTest.vue';

const item = ref({
  foo: {
    bah: { baz: { test: 1 } },
    foz: { flop: [1, 3, 4] },
  },
});

const updateItem = async (_item) => {
  console.log('I WAS CALLED BY CHILD', _item);
  item.value = { ..._item };
};
</script>

see the stackBlitz for a working example