[Vuejs]-Why is "attempted to set private field on non-instance only" error firing when using a data member and not when using a local variable?

4👍

Thanks to Mythos, it appeared that it works with vue2 (example here) but not with vue3 (example here).
After some digging, it looks like private members break proxies and that Proxy were introduced in vue3 for components’ data function :

When we return a plain JavaScript object from a component’s data
function, Vue will wrap that object in a Proxy (opens new window)with
handlers for get and set. Proxies were introduced in ES6 and allow Vue
3 to avoid some of the reactivity caveats that existed in earlier
versions of Vue.

Leave a comment