Closed
Description
Vue version
v3.5.13
Link to minimal reproduction
Steps to reproduce
- Create a
shallowRef
and create a variable to wrap the shallow ref withreadonly
- Update the original
shallowRef
nested value - Call
triggerRef
for the readonly value
function useFoo() {
const foo = shallowRef({ n: 1 })
function add() {
foo.value.n++
}
return { foo: readonly(foo), add }
}
const { foo, add } = useFoo()
onMounted(() => {
add()
triggerRef(foo) // cannot trigger the readonly ref
})
What is expected?
The readonly ref should be triggered by triggerRef
.
What is actually happening?
It cannot be trigger and output the following warning message.
[Vue warn] Set operation on key "version" failed: target is readonly.
[Vue warn] Set operation on key "flags" failed: target is readonly.
[Vue warn] Set operation on key "next" failed: target is readonly.
[Vue warn] Set operation on key "next" failed: target is readonly.
[Vue warn] Set operation on key "flags" failed: target is readonly.
System Info
System:
OS: macOS 15
CPU: arm64 Apple
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: 9.15.4 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
Browsers:
Chrome: 132
Safari: 18
Any additional comments?
I’m wondering: even though a readonly value can’t be modified directly, shouldn’t it still be possible to trigger updates?