• Im working on a vue project and i have one component that is a numeric input like so :

<template>
   <input
      v-regex="regex"
      type="text"
   />
</template>

• the v-regex directive is created with inputmask like so :

Vue.directive('regex', {
         bind(element, binding) {
            inputMask({
               regex: binding.value,
               placeholder: '',
               showMaskOnHover: false,
               showMaskOnFocus: false,
               clearMaskOnLostFocus: false,
            }).mask(element)
         },
      })

-and the component is used inside a form like this :

<myComponent
 id="myId"
 class="my-class"
 :placeholder="'write Number'"
/>

the problem im having is : when i click inside the input and then outside it the placeholder "write Number" disappear and never show again unless i refresh the page , is there a way to fix this ? thank you