Adding a "refs" method that return all template's refs

[la40]

In vue options api we have this.$refs which is genial but we don't have it in the composition api.

The problem

Let's go throught following example. I use quasar and I have a form with a lot of fields where each field is referenced. When the form is submitted I want to validate them one after another. So with options api I can just do the following:

const refsToValidate = ["name", "email", "password"];
for(const ref of refsToValidate){
  this.$refs[ref].validate()
}

simple right ...

and now the same example with current composition api

const name= ref(null)
const email= ref(null)
const password = ref(null)
const refInputsToValidate = [name, email, password]
for (const inputRef of refInputsToValidate) {
  inputRef.value.validate();
}

It's a way more verbose and not flexible.

And imagine now that we have 20 or even more fields.

Possible implementation

const allTemplateRefs = refs() or the more verbose templateRefs() which do the same as this.$refs

[zhenzhenChange]

You can do this

[HerringtonDarkholme]

I do think this is trivial to do in Vue's API. Say we can write a function to build a map of refs.

const fields = reactive({
  name: null, email: null, password: null, // ...
})
const refs = toRefs(fields)

for (const inputRef of Object.values(refs)) {
  inputRef.value.validate();
}

[theoephraim]

makes sense and somewhat related to #427

There are other strategies which may be better for this use case though...
I have a solution I use which uses provide/inject so the parent component (form) has register/unregister methods, and the children (each input component) registers themselves with mount hooks