title: VeeValidate 4: two forms on one page
body: <p>I have a Vue component in a Vue component, and both of them contain one form each that I want to validate individually.</p>
  <pre><code>&lt;form @submit=&quot;submitLogin&quot;&gt;
    Input fields and button
  &lt;/form&gt;
  &lt;OtherComponent /&gt;
  </code></pre>
  <p>Where the other component has a similar form. It appears when I use handleSubmit the main component will try to handle all the input fields, and the handleSubmit in OtherComponent does not work at all.</p>
  <pre><code>const { handleSubmit } = useForm();
  </code></pre>
  <p>I also tried a workaround where I instead used validate, manually ran a validation on button clicks and checking meta valid to see if the form was valid.</p>
  <pre><code>const { validate, meta } = useForm()
  </code></pre>
  <p>The same thing happened here, since both components use validate useForm it messes up the OtherComponent's one. When I check the meta it says it's always valid even if it isn't.
  I have thought about putting them in the same component but don't see how that would make a difference.</p>
  <p>Is there a way to achieve this or do I have to someone work around it?</p>