Clear the field automatically if it is not completely filled about vue-the-mask HOT 3 OPEN

<template>
  <input-el
    :value="value"
    @input="$emit('input', $event)"
    @blur="clearIncompletedField()"
    @paste.prevent
    v-mask="mask"
    v-bind="$attrs"
  />
</template>

<script>
import { mask } from 'vue-the-mask';

export default {
  inheritAttrs: false,
  directives: { mask },
  props: {
    value: String,
    mask: String,
  },
  methods: {
    clearIncompletedField() {
      if (this.value.length < this.mask.length) {
        this.$emit('input', '');
      }
    },
  },
};
</script>

<template>
  <input-el
    v-mask="mask"
    :value="value"
    v-bind="$attrs"
    @input="$emit('input', $event)"
    @blur="clearIncompletedField()"
    @paste.prevent
  />
</template>

<script>
import { mask } from 'vue-the-mask';

export default {
  directives: { mask },
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      required: true,
    },
    mask: {
      type: [String, Array],
      required: true,
    },
  },
  methods: {
    clearIncompletedField() {
      if (this.mask) {
        if (Array.isArray(this.mask)) {
          const valueMatchesMask = this.mask.some(m => this.value.length === m.length);
          if (valueMatchesMask) {
            return;
          }
          this.$emit('input', '');
        } else if (this.value.length < this.mask.length) {
          this.$emit('input', '');
        }
      }
    },
  },
};
</script>