Update - March 2021 (Using Composition API)

I am revising this response because Vue 3 (or the composition API plugin for Vue 2) now includes some new functions.

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
  import { ref, onMounted, defineComponent } from '@vue/composition-api'

  export default defineComponent({
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  })
</script>

Update - April 2020:

If you are working with Vue, I recommend using the vue-property-decorator library and its @Ref feature.

import { Vue, Component, Ref } from 'vue-property-decorator'

import AnotherComponent from '@/path/to/another-component.vue'

@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

Original Solution

Previous answers did not solve my issue. By adding the $refs property as shown below, the problem was resolved and the expected properties were restored. This solution was found via this github post.

class YourComponent extends Vue {
  $refs!: {
    vue: Vue,
    element: HTMLInputElement,
    vues: Vue[],
    elements: HTMLInputElement[]
  }

  someMethod () {
    this.$refs.<element>.<attribute>
  }
}

childComponent.vue

const ChildComponent = Vue.extend({
  components: {},
  props: {},
  methods: {
    assistance(){}
  }
  ...
})
export type ChildComponentRef = InstanceType<typeof ChildComponent>;
export default ChildComponent;

parentComponent.vue

<child-component ref="child" />

computed: {
  child(): ChildComponentRef {
    return this.$refs.child as ChildComponentRef;
  }
}

//usage
this.child.assistance();

Here's a solution that worked for me: utilize either

(this.$refs.<refField> as any).value

(this.$refs.['refField'] as any).value

To avoid conflicts with JSX, it is recommended to refrain from using brackets for typecasting.

Instead, consider the following approach:

update() {
    const plateElement = this.$refs.plate as HTMLInputElement
    this.$emit('input', { plate: plateElement.value });
}

It's important to keep in mind that:

Typescript is essentially Javascript with added strong typing capabilities for improved type safety. Therefore, it usually does not automatically predict the type of X (variable, parameter, etc) or implicitly typecast any operations.

Another key purpose of typescript is to enhance the clarity and readability of JS code, so always strive to define types whenever feasible.

Perhaps this information will come in handy for someone seeking a more visually appealing look and continued support for various types.

Markup:

<input ref="commentInput" v-model="commentInput">

TypeScript:

const commentValue = ((this.$refs.commentInput as Vue).$el as HTMLInputElement).value;

When dealing with custom component method calls,

We can easily reference the method by typecasting the component name.

For example:

(this.$refs.customComponent as CustomComponent).customMethod();

where CustomComponent is a Vue component defined as follows:

@Component
export default class CustomComponent extends Vue {
    public customMethod() {
        // Custom code
    }
}

I dedicated a significant amount of time searching for a solution to this issue utilizing Vue 3, TypeScript with class components, and (somewhat unrelated) TipTap. I stumbled upon the answer provided by bestRenekton above which ultimately resolved my problem, although it required some adjustments. I am confident that this particular issue is specific to TypeScript.

At the beginning of my child component, I have this:

export default class WindEditor extends Vue {

Within it, there is a method that I need to invoke from the parent:

doThat(action: string) {
    console.log('Triggered with ' + action)
}

The following code appears at the end:

export type EditorReference = InstanceType<<typeof WindEditor>
</script>

This informs any consumer of the child component that they can access it using the variable EditorReference. The parent component includes the child component in its template:

<WindEditor ref="refEditor" />

Subsequently, the parent component imports `ref`, the child component, and the exposed object:

import { ref } from 'vue'
import WindEditor, { EditorReference } from './components/WindEditor.vue'

I then create a method to retrieve this object:

obtainEditor(): EditorReference {
    // obtains a reference to the child component
    return this.$refs.refEditor as EditorReference
}

Finally, I am able to manage events - for instance:

handleButtonPress(message: string) {
    // executes method in child component
    this.obtainEditor().doThat(message)

Just like everything else involving client-side scripting, it turned out to be more challenging than anticipated!

When converting your existing Vue project from Javascript to Typescript and want to maintain the old format, be sure to wrap your exports with Vue.extend().

Before:

https://i.sstatic.net/oULIs.png

<script lang="ts">

export default {
  mounted() {
    let element = this.$refs.graph;

...

After:

https://i.sstatic.net/Gpbq4.png

<script lang="ts">

import Vue from "vue";

export default Vue.extend({
  mounted() {
    let element = this.$refs.graph;

...

After experimenting with Vue 3 and the Options API, I found a solution that worked well for me:

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  methods: {
    someAction() {
      (this.$refs.foo as HTMLInputElement).value = 'abc';
    },
  },
});
</script>

I noticed that the autocomplete feature didn't recognize the foo property in $refs because it was defined in the template and wasn't inferred by the system.

However, once I explicitly casted .foo to the type of HTML element, everything started working smoothly. This allowed me to access any element property, like .value as shown in the example above.

If you want to implement a robust type approach, consider using InstanceType. Check out the following demonstration:

UsersPage.vue:

<template>
    <h-table ref="usersTable"></h-table>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import HTable from "@/components/HTable.vue"

type HTableType = InstanceType<typeof HTable>;

export default defineComponent({
    name: "UsersPage",
    components: {
        HTable,
    },
    mounted() {
        (this.$refs.usersTable as HTableType).load(); // "load()" is a strongly typed method which belongs to HTable component. Any modification of that method would cause a compilation error in all places where it's used.
    },
});
</script>

I managed to find a solution, although I must admit it's not the most visually pleasing in my eyes.

If you have any other or improved suggestions, please feel free to share them.

update() {
    this.$emit('input', {
        plate: (<any>this.$refs.plate).value,
    });
}