How to hide mask in input after losing focus?

Question

Vue.js

I use the vue-imask plugin , I want the mask to appear in the input when it is focused, and when it is lost, if the entered value is less than the desired length, the input is cleared and the placeholder reappears. With focus, everything is fine, but with loss, there is no desired effect. Demo

<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

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