defineModel default value is NOT reactive, buts that's odd

[yooouuri]

So I have a component, where I need to use the v-model in a scenario and one I don't.

const state = defineModel<CustomerLookupState>('lookup', {
    default: () =>({
        phone_number: '',
        birthday: null,
        location_id: null,
    }),
});

And then in my component, I bind the state to some form component.

In scenario 1, where I bind the v-model to my component, everything is working fine.

In scenario 2, I don't need to bind the v-model, I want to use the defineModel and need the default value.

As per #10009, it states I should wrap it in reactive. That works.

This feels weird, because of the use-case that you can use defineModel as a "standalone" ref, but if I define a default value, the defineModel is not reactive anymore...

[sunnypatell]

@yooouuri this is by design. defineModel compiles to useModel() in packages/runtime-core/src/helpers/useModel.ts, which uses customRef internally. the default value gets stored in a plain localValue variable, not a reactive proxy.

when you do state.value.phone_number = 'x', you're mutating a property on a plain object. the customRef's set() is never called (you're not replacing state.value, just mutating a nested property), so no reactivity triggers.

the fix is to wrap the default in reactive():

const state = defineModel<{ phone_number: string }>('lookup', {
  default: () => reactive({ phone_number: '' })
})

this makes the inner object a reactive proxy, so property mutations are tracked. the factory function is required (same as standard Vue props).

this was confirmed as expected behavior in vuejs/core#10009. defineModel's default behaves identically to a prop default, it's not meant to be a standalone reactive store. if you don't need two-way parent binding and just want local reactive state, ref() or reactive() directly is the simpler option.

[aniruddhaadak80]

Hi @yooouuri!

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!