Description
Version
3.0.5
Reproduction link
Steps to reproduce
Create an object with non-writable, non-configurable property and wrap it with reactive()
proxy
setup() {
const inner = { a: 1, b: 2 };
let outer = {};
Object.defineProperty(outer, "prop", {
value: inner,
writable: false,
configurable: false,
});
outer = reactive(outer); // coment this line to fix the issue
return {
outer,
};
},
What is expected?
Proxy returned should conform to the ECMA specification - Invariants of the Essential Internal Methods
Specifically the one for Get
method:
If P was previously observed as a non-configurable, non-writable own data property of the target with value v, then [[Get]] must return the SameValue.
So the proxy returned by reactive
should not make object stored in prop
property reactive proxy or change it's value in any other way...
What is actually happening?
Object stored in prop
property is converted into reactive proxy and browsers throw an error when accessed from template:
Firefox: TypeError: proxy must report the same value for the non-writable, non-configurable property '"prop"'
Chrome: TypeError: 'get' on proxy: property 'prop' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '[object Object]')