Make v-form validation great again

src/components/VForm/VForm.js

@@ -5,25 +5,20 @@ export default {
 
   data () {
     return {
-      inputs: 0,
+      inputs: [],
       errorBag: {}
     }
   },
 
   props: {
-    value: Boolean
+    value: Boolean,
+    lazyValidation: Boolean
   },
 
   watch: {
     errorBag: {
       handler () {
-        const keys = Object.keys(this.errorBag)
-        if (keys.length < this.inputs) return false
-
-        const errors = keys.reduce((errors, key) => {
-          errors = errors || this.errorBag[key]
-          return errors
-        }, false)
+        const errors = Object.values(this.errorBag).includes(true)
 
         this.$emit('input', !errors)
 
@@ -35,41 +30,80 @@ export default {
 
   methods: {
     getInputs () {
-      return this.$children.filter(child => {
-        return typeof child.errorBucket !== 'undefined'
+      const results = []
+
+      const search = (children, depth = 0) => {
+        for (const child of children) {
+          if (child.errorBucket !== undefined) {
+            results.push(child)
+          } else {
+            search(child.$children, depth + 1)
+          }
+        }
+        if (depth === 0) return results
+      }
+
+      return search(this.$children)
+    },
+    watchInputs (inputs) {
+      inputs === undefined && (inputs = this.getInputs())
+
+      for (const child of inputs) {
+        if (this.inputs.includes(child)) {
+          continue // We already know about this input
+        }
+
+        this.inputs.push(child)
+
+        this.watchChild(child)
+      }
+    },
+    watchChild (child) {
+      const watcher = (child) => {
+        child.$watch('valid', (val) => {
+          this.$set(this.errorBag, child._uid, !val)
+        }, { immediate: true })
+      }
+
+      if (!this.lazyValidation) return watcher(child)
+
+      // Only start watching inputs if we need to
+      child.$watch('shouldValidate', (val) => {
+        if (!val) return
+
+        // Only watch if we're not already doing it
+        if (this.errorBag.hasOwnProperty(child._uid)) return
+
+        watcher(child)
       })
     },
     validate () {
-      const errors = this.getInputs().reduce((errors, child) => {
-        const error = !child.validate(true)
-        return errors || error
-      }, false)
-
-      return !errors
+      return !this.inputs.filter(input => input.validate(true)).length
     },
     reset () {
-      this.getInputs().forEach((input) => input.reset())
+      this.inputs.forEach((input) => input.reset())
+      Object.keys(this.errorBag).forEach(key => this.$delete(this.errorBag, key))
     }
   },
 
   mounted () {
-    this.$vuetify.load(() => {
-      this.getInputs().forEach((child) => {
-        this.inputs += 1
+    this.$vuetify.load(() => this.watchInputs())
+  },
 
-        // Only start watching inputs if we need to
-        child.$watch('shouldValidate', (val) => {
-          if (!val) return
+  updated () {
+    const inputs = this.getInputs()
 
-          // Only watch if we're not already doing it
-          if (this.errorBag.hasOwnProperty(child._uid)) return
+    if (inputs.length < this.inputs.length) {
+      // Something was removed, we don't want it in the errorBag any more
+      const removed = this.inputs.filter(i => !inputs.includes(i))
 
-          child.$watch('valid', (val) => {
-            this.$set(this.errorBag, child._uid, !val)
-          }, { immediate: true })
-        })
-      })
-    })
+      for (const input of removed) {
+        this.$delete(this.errorBag, input._uid)
+        this.$delete(this.inputs, this.inputs.indexOf(input))
+      }
+    }
+
+    this.watchInputs(inputs)
   },
 
   render (h) {