refreshOptions doesn't seem to be working

[sarah2627]

I want to refresh my options according to a props that I pass to my BaseInputSelect component. So I'm using the refreshOptions function, which is in the doc: https://www.npmjs.com/package/@vueform/multiselect/v/2.1.0#api

However, I get the following error (Vue3) :

Uncaught (in promise) TypeError: multiselect.value.refreshOptions is not a function

My code (BaseInputSelect.vue) :

<template>
  <Multiselect
    v-model="model"
    v-bind="$attrs"
    :options="selectData"
    :mode="multipleValues ? 'tags' : 'single'"
    :searchable="true"
    :loading="isLoading"
    :label="objectTitle"
    :value-prop="objectKey"
    :min-chars="minChars"
    :no-options-text="emptyText"
    :no-results-text="emptyText"
    :can-clear="canClear"
    ref="multiselect"
    @search-change="onSearch"
    @open="onOpen"
    @close="onClose"
  >
    <template #singlelabel="{ value }">
      <slot name="singlelabel" :value="value" />
    </template>

    <template #option="{ option }">
      <slot name="option" :option="option" />
    </template>

    <template #tag="{ option, handleTagRemove, disabled }">
      <slot
        name="tag"
        :option="option"
        :handle-tag-remove="handleTagRemove"
        :disabled="disabled"
      />
    </template>
  </Multiselect>
</template>

<script>
import { ref, watch, computed } from 'vue'

import Multiselect from '@vueform/multiselect'

export default {
  name: 'BaseInputSelect',
  inheritAttrs: false,
  components: {
    Multiselect
  },
  props: {
    modelValue: {
      type: [Array, String, Number, Boolean]
    },
    inputData: {
      type: Array
    },
    objectKey: {
      type: String,
      default: 'value'
    },
    objectTitle: {
      type: String,
      default: 'label'
    },
    multipleValues: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: 'Aucune option'
    },
    status: {
      type: String
    },
    minChars: {
      type: Number,
      default: 2
    },
    isInHeader: {
      type: Boolean,
      default: false
    },
    canClear: {
      type: Boolean,
      default: true
    },
    needRefresh: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'on-search'],
  setup(props, { emit }) {
    const model = ref(props.modelValue)
    const isOpen = ref(false)
    const selectData = computed(() => props.inputData)
    const isLoading = computed(() => props.status === 'loading')

    watch(
      () => props.modelValue,
      value => {
        model.value = value
      }
    )

    watch(model, () => {
      emit('update:modelValue', model.value)
    })

    watch(
      () => props.needRefresh,
      () => {
        const multiselect = ref('multiselect')

        // error is here
        multiselect.value.refreshOptions()
      }
    )

    function onSearch(search) {
      emit('on-search', search)
    }

    function onOpen() {
      isOpen.value = true
    }

    function onClose() {
      isOpen.value = false
    }

    return {
      model,
      selectData,
      isOpen,
      isLoading,
      onSearch,
      onOpen,
      onClose
    }
  }
}
</script>

<style lang="scss">
.input-select-container {
  .multiselect-wrapper {
    width: 100%;
  }
}
</style>

Do you have any idea what the problem is?

Thanks in advance!