Vue$refs对象的类型为“未知”

我只是想$refs在我的 Vue 3 应用程序中使用，但我一直收到 Typescript 错误Object is of type 'unknown'。我不知道如何解决这个问题。

这是我的 .vue 文件：

<template>
    <div>
        <h2>
            Add Products
        </h2>
        <Multiselect v-model="products"
                                 mode="tags"
                                 placeholder="Select one or more products..."
                                 ref="multi"
                                 :searchable="true"
                                 :createTag="true"
                                 :options="options"></Multiselect>

        <div v-for="(product, index) in this.products"
                 v-bind:key="index"
                 v-bind:name="product">

            <Button
                            text="Remove"
                            @click="removeProduct(product)"></Button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Button from '@/components/Button.vue'
import Multiselect from '@vueform/multiselect'

export default defineComponent({
    name: 'TrackSymptoms',
    components: {
        Button,
        Multiselect
    },
    data () {
        return {
            products: [],
            options: [
                { value: 'Alpha', label: 'Alpha' },
                { value: 'Bravo', label: 'Bravo' },
                { value: 'Charlie', label: 'Charlie' },
                { value: 'Delta', label: 'Delta' }
            ]
        }
    },
    methods: {
        removeProduct (product: string) {
            this.$refs.multi.deselect(product)
        }
    }
})
</script>

线this.$refs.multi.deselect(product)在removeProduct函数是一个生产误差。

这是通过文档指示使用它的方式：

mounted() {
  this.$refs.multiselect.open()
}