Why is vue v-model not working for an array prop?

Question

I have a custom component that takes the modelValue prop and emits the update:modelValue event. In the parent component I pass an array:

TestComponent.vue

<template>
  <div>
     <button @click="updateIt">Test</button>
  </div>
</template>

<script>
export default {
    props: {
       modelValue: Array
    },
    emits: ["update:modelValue"],
    setup(props, {emit}){
        return {
            updateIt(){
                emit("update:modelValue", [4,5,6])
            }
        }
    }
}
</script>

App.vue

<template>
  <div>
     <test-component v-model="myArr"/>
     <ul>
         <li v-for="i in myArr" v-text="i"></li>
     </ul>
  </div>
</template>

<script>
import TestComponent from "./TestComponent.vue";

export default {
    components: {
        TestComponent
    },
    setup(props, {emit}){
        const myArr = reactive([1,2,3]);

        return {
            myArr
        }
    }
}
</script>

The list will not get updated when I press the button, why?

Answer 1

Internally, the v-model directive gets changed to a handler function for the update:modelValue event that looks something like this:

$event => ((exp => $event) where exp is the expression in the directive

which basically means, when the update:modelValue event is emitted, the value you emit is assigned directly to the myArr variable, effectively replacing the whole reactive variable without triggering the reactivity chain, because it does not happen through the proxy.

If myArr would be a ref([]) vue detects it and the handler function looks something like this:

$event => (exp ? (exp).value = $event : null) where exp is the expression in the directive

which means that the value gets assigned through the ref proxy, triggering the reactivity chain.

But there is no internal logic that checks if the passed expression is an array and if so, does some splice push magic to keep the original variable, you have to do that yourself.

Possible Solutions:

1) use an object key:

 <test-component v-model="myArr.data"/>

 ...

 const myArr = reactive({
    data: [1,2,3]
 });

2) use a ref:

 <test-component v-model="myArr"/>

 ...

 const myArr = ref([1,2,3]);

3) use a custom handler function:

 <test-component :modelValue="myArr" @update:modelValue="onChange"/>

 ...

 const myArr = reactive([1,2,3]);

 function onChange(newval){
   myArr.splice(0, myArr.length, ...newval);
 }