Vue 3

Using @vue/compat, the beforeCreate hook in proxy.ts throws an exception:

this.$refs = new Proxy(...)
TypeError: 'set' on proxy: trap returned falsish for property

My Vue 3 fix is to change the hook to this:

beforeCreate() {
    this.$.refs = reactive({});
}

Note the period between the ‘$’ and the ‘refs’.

I swore I read somewhere that $refs was going to be reactive in Vue 3, but it seems not to be. Maybe I just imagined it…

[diachedelic]

It is so easy to get reactive refs in Vue 3 that a plugin isn’t really justified. I recommend that you simply include the following beforeCreate hook in any component which depends on reactive refs:

import {reactive} from "vue";
export default {
    beforeCreate() {
        this.$.refs = reactive({});
    }
};

If you want reactive refs in every component automatically, add the hook globally:

import {createApp, reactive} from "vue";
const app = createApp(...);
app.mixin({
    beforeCreate() {
        this.$.refs = reactive({});
    }
});

[diachedelic]

Can it be fixed?