How to validate input that lives in a child component

[johnboy]

Setup

• I have a form which is contains three q-inputs, each of which lives in a seprate child component (for reusability).
• Each input is using internal validation with a ‘required’ rule.
• Each input has a ref.
• One of the inputs has a popup proxy with a date picker

Issue

• The date picker validation does not fire if the field is empty. That is when validating the form via this.$refs.form.validate() the validation returns success, even though the date picker input does not have a value.

I am looking for a way to call validate() on the date picker input. I have tried this.$refs.refName.validate() but this return validate is not a function. Is this because it sits as a child component?

Note: I can focus the date picker input using this.$refs.dueDate.$el.focus()

Any help appreciated.

[johnboy]

Solved. For those interested, this section of the Vue documentation provides the solution: https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements