Как скрывать маску в инпуте после потери фокуса?

Question

[Сергей Примиренков]

Использую плагин vue-imask, хочу, чтобы при фокусе маска в инпуте появлялась, а при потере его, если введённое значение меньше нужной длины - инпут очищался и заново появлялся плейсхолдер. При фокусе всё нормально, но при потере нет нужного эффекта. Демка

<template>
  <div class="hello">
    <input
      type="tel"
      class="input"
      id="tel"
      name="Телефон"
      :value="valueTel"
      v-imask="maskTel"
      @accept="onAccept"
      @focus="showMask"
      @blur="hideMask"
      placeholder="Телефон в формате 8-(XXX)-XXX-XX-XX"
      pattern="8-\([0-9]{3}\)-[0-9]{3}-[0-9]{2}-[0-9]{2}"
      title
      required
    >
  </div>
</template>

<script>
import { IMaskDirective } from "vue-imask";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      valueTel: "",
      maskTel: {
        mask: "{8}-(000)-000-00-00",
        lazy: true
      }
    };
  },
  directives: {
    imask: IMaskDirective
  },
  methods: {
    showMask(evt) {
      if (evt.target.id === "tel") {
        this.maskTel.lazy = false;
      }
    },
    hideMask(evt) {
      if (this.valueTel.length < 11) {
        this.maskTel.lazy = true;
        this.valueTel = "";
        console.log(this.valueTel.length);
      }
      console.log(this.valueTel);
    },
    onAccept(evt) {
      const maskRef = evt.detail;

      if (maskRef.el.input.id === "tel") {
        this.valueTel = maskRef.unmaskedValue;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
input {
  width: 300px;
  padding: 10px;
}
</style>

Answer 1

[0xD34F]

this.maskTel.lazy = true;
this.$nextTick(() => this.valueTel = '');