Could I use this as Directive? about vue-currency-input HOT 3 CLOSED

<!-- https://github.com/dm4t2/vue-currency-input/issues/19#issuecomment-514995907 -->
<template>
  <el-input ref="elInput" v-currency="options" :value="formattedValue" @input="handleInput" :placeholder="placeholder"/>
</template>

<script lang="ts">
import { setValue, getValue } from 'vue-currency-input';
import { Component, Vue, Emit, Watch, Prop } from 'vue-property-decorator';
import { ElInput } from 'element-ui/types/input';

@Component({})
export default class ElCurrencyInput extends Vue {

  public formattedValue: string | number | null = null;
  @Prop() private value: any;
  @Prop() private placeholder?: string;

  @Watch('value')
  private onValueChange(value: number, oldValue: number) {
    this.setValue(value);
  }

  @Emit('input')
  private handleInput(value: string): number | null {
    this.formattedValue = value;
    return getValue((this.$refs.elInput as ElInput).$refs.input as HTMLInputElement);
  }

  private setValue(value: number) {
    setValue((this.$refs.elInput as ElInput).$refs.input as HTMLInputElement, value);
  }

  private mounted() {
    this.setValue(this.value);
  }

  get options() {
    return {
      locale: 'de-DE', // 'es-ES' does not have thousands separators in numbers of 4 digits or less, but 'de-DE' does
      currency: null, // to hide the coin,
    };
  }

}
</script>