Validate Child Input Components On Submit With Vee-validate And Vue Js 2

I'm currently trying to create a Registration form with multiple 'Input Field' components which all require validating once Submit has been pressed. They all currently validate on

Solution 1:

In your example i can't see any validation attempt, but here is my working example in jsfiddle: link

what i did: -add submit method to info component

submit: function(){
        var validationArray = this.$children.map(function(child){
        return child.$validator.validateAll();
      });

    window.Promise.all(validationArray).then((v) => {
            alert('From Submitted!');
        }).catch(() => {
            alert('Correct them errors!');
        });
    }

this method basically validates all children of your info(single-inputs in this case).

-changed a bit template of span with error message:

{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}

edit: I can only gues what was wrong with your code, but I belive that problem in your case was fact that you have to access a "direct" validators under components with inputs - single-input, not info component.