I created a unique custom component that uses the modelValue prop and emits the update:modelValue event. When I pass an array in the parent component, the list does not update when pressing the button:
CustomComponent.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>
MainApp.vue
<template>
<div>
<custom-component v-model="myArr"/>
<ul>
<li v-for="i in myArr" v-text="i"></li>
</ul>
</div>
</template>
<script>
import CustomComponent from "./CustomComponent.vue";
export default {
components: {
CustomComponent
},
setup(props, {emit}){
const myArr = reactive([1,2,3]);
return {
myArr
}
}
}
</script>
Even after repeatedly clicking the button, the list does not update as expected. What could be causing this issue?