Vuetify nested form elements not working with $refs

Question

I'm unable to get my form to be able to utilize the refs I've defined within my form. My structure looks something a little like this:

<v-form v-model="myModel" ref="form">
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex xs4>
        <v-combobox
            v-model="comboModel"
            item-text="name"
            return-object
            :items="itemArray"
            label="combo model*"
            required
            ref="form"
          ></v-combobox>
      </v-flex>
    </v-layout>
  </v-container>
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex xs4>
        <v-combobox
            v-model="comboModel2"
            item-text="name"
            return-object
            :items="itemArray"
            label="combo model*"
            required
            ref="form"
          ></v-combobox>
      </v-flex>
    </v-layout>
  </v-container>
</v-form>

I haven't been able to find any documentation around this, but it appears that my structure within the form is making it so the refs are not available to me. I'm receiving this error:

"TypeError: this.$refs.form.reset is not a function"

I'm just wondering if there's any documentation on this, or what about this structure is causing this to fail. I've tried adding input elements as a direct decedent of the form element, and that works just fine. The problem is when I nest them like, which I need to maintain some integrity in the visual structure of my form.

Answer 1

ref="form" 

is same on all. So you are not able to access that with this.$refs.form . instead of this give unique name to them. for example

ref="form", ref="combo1", ref="combo2" .