defineModel push array doesnt trigger the value

[modos]

Vue version

3.4.29

Link to minimal reproduction

https://play.vuejs.org/#eNp9UUtPAjEQ/itNT5iQJT4u4kJUwkETH1Fv1pi1O0Ch2zbtFDfZ7H93uhuQA+HW7zFfvpk2/M65bBuBj3kepFcOWQCMbiqMtCYgkzYaZBNWwkIZeLIl6EFDoIgax+zzqz27ESYf9bM0RQChcrpAIMRY0/QRbZtQ/hMRrWG3Uiu5mQjeaZmLYTU4pyQ+nSUiH/U+SshHB3F8yDFQr4VaZutgDbVuUmzKqZzS4F8cKuot+Jh1StIKre3vY8ehjzDc8XIFcnOEX4c6cYK/egjgtyD4XsPCLwF7ef7+DDW992Jly6jJfUJ8g2B1TB172300JdU+8HVtHypnPSqz/AjzGsGE3VKpaHK2nV9w+rrZidX/615mV92cMC1d8XsLPmXSAUnILq55+wfSta33

Steps to reproduce

declared an array with defineModel macro, if you want to add a value to array with push() method, it doesn't trigger the value of the array

What is expected?

click on the button should add a value to array and trigger the reactivity.

What is actually happening?

new value doesn't add to array when clicked on the button

System Info

No response

Any additional comments?

temporary we can use something like array = [...array] after push new value to trigger the reactivity but i dont think it's such a good idea. this issue reminds me of the $vue.set method that we have to use when pushing items to array in vue 2.

[gkweb]

@modos Doesn't this fall into the existing warning in the docs regarding breaking of synchronisation between parent / child when no value supplied to child?

Quote from docs:

https://vuejs.org/api/sfc-script-setup.html#definemodel

If you have a default value for defineModel prop and you don't provide any value for this prop from the parent component, it can cause a de-synchronization between parent and child components. In the example below, the parent's myRef is undefined, but the child's model is 1:

// js
// child component:
const model = defineModel({ default: 1 })

// parent component:
const myRef = ref()
// html
<Child v-model="myRef"></Child> 

In your example, a quick breakdown:

// Parent

<script setup>
import { ref } from 'vue'

import Child from './Child.vue'
const count = ref([])
</script>

<template>
  <Child v-model="count"/>
</template>

// Child

<script setup>
const count = defineModel({default: []});
</script>

<template>
  {{ count}}
  <button @click="count.push(1);">Count</button>
</template>

[modos]

@gkweb no it's not, the subject you mentioned is that when parent and child mounted, the default value in child doesn't apply to the parent, but if you change it in runtime, then parent value updated, check this out:
https://play.vuejs.org/#eNqFUk1PwzAM/StWLgMBKxKcoEPAxAEkPgQccympN8LSJMrHmFT1v+Ok26jENG6x37P9nOeW3Vg7XkZkF6z0wkkbwGOI9opr2VjjArTgcAYdzJxpYETU0RaafkpVr4FxkaPUa3TJtTDaB7CVQx2mJuoAk9Tn4JCwsugn0QwKAjZWVQEpAihrucwPAJGrcvO+zQW07bBj1+WKYlNS9nKWJ42pUU04G3A5K4hTFoNh7JgFTzJncj7+8kbTD7SpDWfCNFYqdM82SFqDM5rca+KsUsp8P+RccBGPN3nxiWKxI//lVynH2YtDj26JnG2xULk5krQE37094YreW5CWiIrYe8BX9EbFpLGn3UZdk+wBL6u9z2ZJPX/3d6uA2m+WSkITs8t8zsi66Z7Vf+Wejc9zHdcd/eLW9x03lGxMh9CbOYEaZ1LjYzLooKWgiop8Pe3+OYvBLYg0LZ9CTq6P4COGYDRcCyXFgqzP2NERZ1fvlYVnDY9YFj3pzx10P0qEBeY=

however the issue I wrote is not about a parent/child situation, it's just a single component. since defineModel is type of CustomRef, i think the reactivity behind the scenes doesn't track the values inside an array.

[alexzhang1030]

Looks like useModel() does not process the object state properly if there is no v-model in the parent component.

test('useModel() w/ object state', async () => {
  let array: any
  const update = () => {
    if (!array.value) {
      array.value = [1]
    } else {
      array.value.push(2)
    }
  }

  const compRender = vi.fn()
  const Comp = defineComponent({
    props: ['modelValue'],
    emits: ['update:modelValue'],
    setup(props) {
      array = useModel(props, 'modelValue')
      return () => {
        compRender()
        return array.value
      }
    },
  })

  const root = nodeOps.createElement('div')
  render(h(Comp), root)

  update()
  expect(compRender).toBeCalledTimes(1)
  expect(array.value).toStrictEqual([1])
  update()
  // Failed
  expect(compRender).toBeCalledTimes(2)
 // Failed
  expect(array.value).toStrictEqual([1, 2])
})

Related code, if the new value is an object value, toReactive() and deeply watch might be able to resolve this issue.

[LinusBorg]

This is not really related to defineModel at all, and it's expected behavior. You provided a nonreactive array as the default value for the defineModel() ( = the modelValue prop that it will create)

That means you are now mutating a plain, non-reactive array. So no reactive effects are being triggered.

The same happens when you provide a non-reactive array as a default for a normal prop (when it received no value from the parent), and then mutat that array:

https://play.vuejs.org/#eNp9UU1PAjEQ/StNT5iQJX5cxIWohIMelKg3a8xaBih026adIslm/7vTbkAOhFvnvTevb2Ya/uBcsY3Ah7wM0iuHLABGNxZGWhOQOW9dYCM2h4UyMEtVrxGGMWmjwSFrElNFTc/PL9YK017cCVMOOjOyoQKhdrpCoIqxpulaW9IyVv5ERGvYvdRKbkaC5/+KrChcDKveJfnx8SQB5aBTk085ODLlfY6B4i7UslgHa2iYHFFwaWunNPhXh4rGEZwCJyZxldb29zlj6CP097hcgdycwNdhlzDBZx4C+C0IfuCw8kvAjp6+v8CO3geytvOoSX2GfINgdUwZO9ljNHOKfaTLaZ9qZz0qs/wI0x2CCfuhUtCkbLNecLro5Mzo/3Gvi5vcR3ejLX5vwSdPWiARxdUtb/8AxTK2Fg==

If you make the default value reactive, it will trigger updates:

with defineModel

https://play.vuejs.org/#eNp9UU1PAjEQ/StNL0BClvhxEReiEg6a+BH1Zo1ZywCFbtu005Vks//d6W5ADoZb5703r29man7rXFZF4GOeB+mVQxYAo5sKo0pnPbKaeSgkqgpYw5belqxH+t61MMJIawIyaaNBNmELWCoDj3YBul9TUUSN40N3/+Nz0AyoLR91H9EXVCCUThcIVDFW151Z06Qq/46I1rAbqZXcTgRvuczFsO6fkROfzhKQjzodOeSjIzs+5Bgo4VKtsk2whkask23yKZ3S4J8dKppA8DFrmcQVWtufhxZDH2G4x+Ua5PYffBN2CRP8xUMAX4HgBw4LvwLs6PnbE+zofSBLu4ia1CfIVwhWx5Sxk91Fs6DYR7o27X17KGVW72G+QzBhP1QKmpRNqxec7jY7Mfpf3Ivssu0TpqEtflXgkyctkIjs/Io3v5M4vkI=

with prop

https://play.vuejs.org/#eNp9UU1PAjEQ/SuTXoCELPHjIi5EJRz0oES9WWPWMkBht236sZJs9r877QbkYLh13nt982amYffGZHVANma5E1YaDw59MFOuZGW09dCAxUJ4WSO0sLK6gh7pe7dccSW0ch6M1cbBBJa4kgoXseo3XAEIHZQfkwMxRSjpebDqf3wOoOWqHZBPPuo6U08qPFamLDxSBdA0nUlLWoD8O3ivFdyJUordhLPUOUuKzAS36V+QH5vOIpCPOjX55KMTUzZk3lHwlVxnW6cVTZ7CciZ0ZWSJ9sV4SYNxRtEjE7miLPXPU8K8DTg84GKDYvcPvnX7iHG2sOjQ1sjZkfOFXaPv6PnbM+7pfSQrvQwlqc+Qr+h0GWLGTvYQ1JJin+hS2sd0P6nW726+96jcYagYNCrbpOeMzjk7M/pf3KvsOv2ju9EWv2q00ZMWSER2ecPaX/iJxmE=

[sanba-anass]

there you go lol

<script setup>
import { ref } from 'vue';

const count = defineModel({default: ref([])});
</script>

<template>
  {{ count}}
  <button @click="count.value.push(1);">Count</button>
</template>