Added reactivity to vue mask

docs/index.htm

@@ -29,6 +29,13 @@
                             </div>
                             <p class="help is-family-code">v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']"</p>
                         </div>
+                        <div class="field">
+                            <label class="label">Reactive mask: <input type="checkbox" v-model="dotFormat"> use dot as date separator?</label>
+                            <div class="control">
+                                <input v-maska="dateMask" class="input">
+                            </div>
+                            <p class="help is-family-code">v-maska="dateMask" — reactive mask by `dateMask` computed property</p>
+                        </div>
                         <div class="field">
                             <label class="label">Hex color (custom tokens): {{ color }}</label>
                             <div class="control">
@@ -118,7 +125,14 @@
             el: '#vue-form',
             data: {
                 phone: '19992345678',
+                dotFormat: false,
                 color: null
+            },
+
+            computed: {
+                dateMask: function() {
+                    return this.dotFormat ? '##.##.####' : '##/##/####'
+                }
             }
         });
 

src/directive.js

@@ -15,15 +15,11 @@ function getOpts (mask) {
 }
 
 function needUpdate (mask) {
-  if (isString(mask.value) && isString(mask.oldValue) && mask.value === mask.oldValue) {
-    return false
-  }
-
-  if (mask.value && mask.oldValue && mask.value.mask === mask.oldValue.mask) {
-    return false
-  }
-
-  return true
+  return !(
+    (isString(mask.value) && mask.value === mask.oldValue) ||
+    (Array.isArray(mask.value) && JSON.stringify(mask.value) === JSON.stringify(mask.oldValue)) ||
+    (mask.value && mask.value.mask && mask.oldValue && mask.oldValue.mask && mask.value.mask === mask.oldValue.mask)
+  )
 }
 
 export default function directive (el, mask) {

src/maska.js

@@ -27,7 +27,7 @@ export default class Maska {
   init () {
     for (let i = 0; i < this._el.length; i++) {
       const el = findInputElement(this._el[i])
-      if (!el.dataset.mask && this._opts.mask) {
+      if ((!el.dataset.mask && this._opts.mask) || el.dataset.mask !== this._opts.mask) {
         el.dataset.mask = this._opts.mask
       }
       this.updateValue(el)