title: Get all input values from dynamic form in Vuejs
body: <p>I have some reusable components:</p>
  
  <ul>
  <li>TextField</li>
  <li>Form</li>
  </ul>
  
  <p>And a component where I import them both. I pass the <code>TextField</code> component as props to the <code>Form</code>. In this <code>Form</code> component I have a submit button which needs to get all the values from the passed <code>TextField</code> components. As far as I could read in the docs I could use the <code>v-model</code> to get the values. But for some reason I can't find how to get those values in my <code>Form</code> component. Maybe I am missing something and I hope someone can help me with it. I already took a look at this question: <a href="https://stackoverflow.com/questions/54885894/get-all-input-values-vuejs">Get all Input values - Vuejs</a>. However, this didn't solve my problem. </p>
  
  <p>The <code>TextField</code> component looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-text-field
      v-model="vModel"
      :rules="rules"
      :counter="counter"
      :label="label"
      :required="required"
      :placeholder="placeholder"
      :value="value"
    &gt;&lt;/v-text-field&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "TextField",
    props: {
      rules: Array,
      counter: Number,
      label: String,
      required: {
        type: Boolean,
        default: true
      },
      placeholder: String,
      value: String
    },
    data: () =&gt; ({
      vModel: '',
    }),
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>Form</code> component looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-form&gt;
      &lt;v-container&gt;
        &lt;slot&gt;&lt;/slot&gt;
        &lt;v-btn class="mr-4" @click="submit"&gt;Submit&lt;/v-btn&gt;
      &lt;/v-container&gt;
    &lt;/v-form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    methods: {
      submit () {
        // console.log form data
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And the component where I import both components:</p>
  
  <pre><code>&lt;template&gt;
    &lt;Form&gt;
        &lt;v-row&gt;
          &lt;v-col cols="12" md="4"&gt;
            &lt;TextField :label="'Email address'" :vModel="email"/&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
    &lt;/Form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Form from "../../../components/Form/Form";
  import TextField from "../../../components/Form/TextField";
  
  export default {
    components: {
      Form,
      TextField,
    },
    data: () =&gt; ({
      email: '',
    })
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I also created a <a href="https://codesandbox.io/s/amazing-frog-6nf9m?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">CodeSandBox</a>. </p>
  
  <p>Can anyone give me some advice on how I might get the <code>v-model</code> values from the <code>TextField</code> components inside the <code>Form</code> component? If it's not possible, or I might do this better in another way please let me know. </p>