How to check if an input from child component it is $invalid

Question

I need to verify if one input from a child component it is valid. But I don't know how to do this from the father component.

I have a form with several fields and theirs validation, To simplify, I moved out each input field and his validations to his own components. But now I need to validate all them together.

How can I do this?

I put the live sample on codesandbox:

https://codesandbox.io/embed/vuetify-playground-o7kbr?fontsize=14

Answer 1

make reference to an input

<input-cpf ref="input" label="CPF" :cpf.sync="cpf"/>

and then you can access component from parent

this.$refs.input.$v.$touch();
if ( this.$refs.input.$v.cpf.$invalid ) {
    console.log('não esta pronto para enviar')
} else {
    console.log('pode enviar')
}