Vue Typescript Flatpickr this.$refs.field is not assignable to parameter of type 'string'

Question

Typescript in Vue with Flatpickr and Veevalidate as Package.

Errorline: this.fp = new Flatpickr(this.$refs.field, {})

ERROR: Argument of type 'Element | Element[] | Vue | Vue[]' is not assignable to parameter of type 'string'. Type 'Element' is not assignable to type 'string'.

<template>
  <div>
    <label :for="name">{{ name }}</label>
     <input
      v-validate="validation"
      :name="name"
      :id="name"
      v-model="name"
      :placeholder="name"
      ref="field"
      type="text"
      value="value"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Flatpickr from 'flatpickr'

@Component({})
export default class BaseDate extends Vue {
  @Prop()
  name!: string

  @Prop({ default: '' })
  validation!: string

  @Prop()
  model!: string

  @Prop()
  validator!: any

  fp: any

  mounted (): void {
    this.$validator = this.validator
    this.fp = new Flatpickr(this.$refs.field, {})
  }
}
</script>

Answer 1

This was the final solution that was valid for me:

this.fp = new (Flatpickr as any)(this.$refs.field as Element, {})