Nuxt(Vue) + TypeScriptでの$refsの参照エラー

概要

子コンポーネントで定義したメソッドを親コンポーネントから直接呼び出したい！
そうだ$refsを使おう！

Property '子コンポーネントのメソッドないしはプロパティ名' does not exist on type 'Element | Element[] | Vue | Vue[]'.
Property '子コンポーネントのメソッドないしはプロパティ名' does not exist on type 'Element'.

そんなプロパティないって言われてるやんけぇ_:(´ཀ`」 ∠):

解決策

<template>
    <children-component ref="children"></children-component>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import ChildrenComponent from '@/components/organisms/ChildrenComponent.vue'

@Component({
  name: 'ParentComponent',
  components: {
    ChildrenComponent,
  }
})
export default class ParentComponent extends Vue {
    $refs!: {
        children: ChildrenComponent
    }

    // ChildrenComponentにあるfugaメソッドを直接ParentComponentで呼びたい場合
    private hoge(): void {
        this.$refs.children.fuga()
    }
}

</script>

詳細

importした子のコンポーネントを型として呼び出せば、その子のコンポーネントにあるpublicのプロパティやメソッドは直接呼び出せる！

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  name: 'ChildrenComponent'
})
export default class ChildrenComponent extends Vue {
    // アクセスできない
    private murimeProperty: string
    // アクセスできる
    public fugaProperty: string

    // できない
    private murimeMethod(): void {}
    // できる
    public fuga(): void {}
}
</script>

余談

ちゃんと型定義すると補完で出てくるの気持ちよすですよねー
今回の場合はVueクラスの$refsをオーバーライドしてるんかな・・
もっとTypeScriptの深淵にゆきたい今日この頃