vue-reactive-refs/dist/index.esm.js

Make $refs reactive so they can be used in computed properties and watchers

/*!
  * vue-reactive-refs v0.0.2
  * (c) 2019 Eduardo San Martin Morote
  * @license MIT
  */
const ReactiveRefs = _Vue => {
    _Vue.mixin({
        beforeCreate() {
            const { refs } = this.$options;
            if (!refs)
                return;
            // @ts-ignore
            this.$refs = _Vue.observable(refs.reduce(($refs, key) => {
                $refs[key] = undefined;
                return $refs;
            }, {}));
        },
    });
};

/**
 * Because this version uses a Proxy, it will fail on any browser that does not
 * support it
 */
const DynamicReactiveRefs = _Vue => {
    _Vue.mixin({
        beforeCreate() {
            const $refs = _Vue.observable({});
            // @ts-ignore
            this.$refs = new Proxy($refs, {
                set(target, key, value) {
                    if (!(key in target))
                        _Vue.set($refs, key, value);
                    return Reflect.set(target, key, value);
                },
                get(target, key) {
                    if (!(key in target))
                        _Vue.set($refs, key, undefined);
                    return Reflect.get(target, key);
                },
            });
        },
    });
};

export { DynamicReactiveRefs, ReactiveRefs };