Function readonly

Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original.

A readonly proxy is deep: any nested property accessed will be readonly as well. It also has the same ref-unwrapping behavior as (), except the unwrapped values will also be made readonly.

Example

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // works for reactivity tracking
  console.log(copy.count)
})

// mutating original will trigger watchers relying on the copy
original.count++

// mutating the copy will fail and result in a warning
copy.count++ // warning!
Copy

See

https://vuejs.org/api/reactivity-core.html#readonly