What problem does this feature solve?

When I use Class Style @Ref and async component, it will not update because cache

vue:

<template>
    <ExamplePage ref="examplePage" @loaded="examplePageDone" />
</template>
<script lang="ts">
import { Vue, Options } from 'vue-class-component';
import { Ref, Store, Watch } from "../../../decorators/VueDecorator";
import { createVNode, defineAsyncComponent } from "@vue/runtime-core";
import type ExamplePage from "@/views/Example.vue";

@Options({
    components: {
        ExamplePage: defineAsyncComponent(() => import("@/views/Example.vue")),
    }
})
export default class Index extends Vue {
    @Ref("examplePage") private examplePage?: ExamplePage;

    mounted() {
        if (import.meta.env.DEV) {
            window.view222 = this;
        }
    }

    examplePageDone() {
        ...
    }
}
</script>

VueDecorator.ts:

import { createDecorator, Vue } from "vue-class-component";
import { getModule, VuexModule } from "vuex-module-decorators";
import { Prop, WatchOptions } from "vue";

export function Ref(refKey?: string) {
    return createDecorator(function (options, key) {
        options.computed = options.computed || {};
        options.computed[key] = {
            cache: false,
            get: function (this: Vue) {
                return this.$refs[refKey || key];
            },
        };
    });
}

package.json:

    "dependencies": {
        "vue": "^3.2.11",
        "vue-i18n": "^9.2.0-beta.4",
    },
    "devDependencies": {
        "@rollup/plugin-alias": "^3.1.2",
        "@rollup/plugin-image": "^2.0.6",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^11.2.0",
        "@types/node": "^14.14.27",
        "@vitejs/plugin-vue": "^1.6.2",
        "@vue/compiler-sfc": "^3.2.11",
        "less": "^4.1.1",
        "postcss": "^8.2.8",
        "postcss-url": "^10.1.1",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-dts": "^3.0.1",
        "rollup-plugin-import-alias": "^1.0.10",
        "rollup-plugin-includepaths": "^0.2.4",
        "rollup-plugin-node-polyfills": "^0.2.1",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-postcss": "^4.0.0",
        "rollup-plugin-terser": "^7.0.2",
        "rollup-plugin-typescript2": "^0.30.0",
        "rollup-plugin-visualizer": "^4.2.0",
        "sass": "^1.32.2",
        "tslib": "^2.1.0",
        "typescript": "^4.1.5",
        "vite": "^2.5.7",
        "vite-plugin-components": "^0.12.2",
        "vite-plugin-pwa": "^0.9.3",
        "vue-class-component": "^8.0.0-rc.1",
        "vue-property-decorator": "^9.1.2",
        "vue-router": "^4.0.10",
        "vuex": "^4.0.0-rc.2",
        "vuex-module-decorators": "^1.0.1"
    }

What does the proposed API look like?

computed: {
    cache: false,
    get: function (this: Vue) {
        return this.$refs[refKey || key];
    },
}

This is not a use case for a computed property.

Ok, I will try another way.