Open
Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
Create a readonly reference to a reference of an array of objects.
const copy = readonly(ref([{ x: 1 }]));
In the template, iterate over the reference array using v-for
, while attempting to modify the current element, for instance, inside a child component setup function or directly in the template as follows.
<div v-for="m in copy">{{ m.x = 0 }}</div>
What is expected?
Modification should be disallowed as the reference is a readonly one.
What is actually happening?
Modification is permitted. Data is mutated. No error or waring issued.
System Info
System:
OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
CPU: (22) x64 Intel(R) Core(TM) Ultra 9 185H
Memory: 10.22 GB / 15.43 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 23.10.0 - /usr/local/bin/node
npm: 10.9.2 - /usr/local/bin/npm
Any additional comments?
This observation only occurs when readonly()
is passed a reference. It doesn't happend if the array is passed directly to readonly()
.