Update masked input on binded value change

src/directive.ts

@@ -5,6 +5,16 @@ type MaskaDirective = Directive<HTMLElement, MaskaDetail | undefined>
 
 const masks = new WeakMap<HTMLInputElement, MaskInput>()
 
+const checkValue = (input: HTMLInputElement): void => {
+  const value = input.dataset.maskaValue
+  if (
+    (value == null && input.value !== '') ||
+    (value != null && value !== input.value)
+  ) {
+    input.dispatchEvent(new CustomEvent('input'))
+  }
+}
+
 export const vMaska: MaskaDirective = (el, binding) => {
   const input = el instanceof HTMLInputElement ? el : el.querySelector('input')
   const opts = { ...(binding.arg as MaskInputOptions) } ?? {}
@@ -13,6 +23,8 @@ export const vMaska: MaskaDirective = (el, binding) => {
 
   const existed = masks.get(input)
   if (existed != null) {
+    checkValue(input)
+
     if (!existed.needUpdate(input, opts)) {
       return
     }
@@ -38,10 +50,8 @@ export const vMaska: MaskaDirective = (el, binding) => {
 
   masks.set(input, new MaskInput(input, opts))
 
-  // check initial value for v-model
+  // timeout to process initial v-model value
   setTimeout(() => {
-    if (input.value !== '') {
-      input.dispatchEvent(new InputEvent('input'))
-    }
+    checkValue(input)
   })
 }

src/mask-input.ts

@@ -145,6 +145,7 @@ export class MaskInput {
     }
 
     input.value = value
+    input.dataset.maskaValue = value
 
     const detail = {
       masked: mask.masked(value),