Allow $refs to be undefined in Typescript types

What problem does this feature solve?

Currently, when you add $refs annotations to a class-based component, the types are defined as follows:

@Component
export default class Foo extends Vue {
    $refs!: {
        bar: Bar;
    };
}

This is handy and allows you to use refs as expected in class methods:

fooMethod() {
    this.$refs.bar.method();
}

However, the types incorrectly assume that the ref is always present, while it might not be so.

async fooMethod() {
    await longApiRequest();
    this.$refs.bar.method();
}

In the above situation, the ref would be undefined if the component unmounted during the async request.

What does the proposed API look like?

The correct types would ideally mark refs as possibly undefined automatically, or alternatively allow the user to do so.

@Component
export default class Foo extends Vue {
    $refs!: {
        bar: Bar | undefined;
    };
}

Currently types don’t allow this.

The above types would ensure the user correctly checks for the ref before calling a method on it:

async fooMethod() {
    await longApiRequest();
    this.$refs.bar?.method();
    // -----------^
}

[jacekkarczmarczyk]

https://github.com/vuejs/vue/pull/11112

[Etheryte]

@posva Upon further inspection, the types stem from this repository, not the class component definition.

They’re defined here: https://github.com/vuejs/vue/blob/dev/types/vue.d.ts#L29

Should this ticket be reopened or is there a better course of action I can take to address this?