title: vuetify vee-validate scroll to the first validation error
body: <p>If the submit button is clicked in a form, it should automatically scroll to the first validation error if an error exists. 
  I've read that I can use "scrolltoview" for this, but I don't know exactly how.</p>
  
  <p>I have already tried it with a simple ScrollTo (0.0) to simply scroll up in the event of errors and it works perfectly. 
  However, this is not the solution I would like to have.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt; script &gt;
    ...
    let name = 'm-form-user';
  export default {
    name: name,
    mixins: [baseForm],
    props: {
      name: {
        type: String,
        default: name
      },
      title: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'create',
        validator: function(value) {
          return ['edit', 'create'].indexOf(value) !== -1
        }
      },
    },
    data: () =&gt; ({
      form: {
        firstName: '',
        lastName: '',
        position: '',
        email: '',
        mobile: '',
        roles: []
      }
    }),
    async created() {
      if (!this.isCreationForm &amp;&amp; this.$route.params.id) {
        if (!this.editingUser.length) {
          await this.requestUser({
            id: this.$route.params.id
          });
        }
        Object.assign(this.form, this.editingUser);
        this.form.roles.pop()
      }
    },
    computed: {
      ...mapGetters({
        getUser: "users/read"
      }),
  
      text() {
        return {
          cancel: this.$t('modules.forms.m-form-user.buttons.cancel'),
          submit: this.$t('modules.forms.m-form-user.buttons.submit')
        }
      },
  
      editingUser() {
        return this.getUser(this.$route.params.id)
      },
      isCreationForm() {
        return this.type === 'create'
      }
    },
    methods: {
      ...mapActions({
        requestCreateUser: 'users/create',
        requestUpdateUser: 'users/update',
        requestUser: 'users/read'
      }),
      async submit() {
        const validAll = await this.$validator.validateAll();
        const validIdentify = this.validateIdentify();
  
        if (!validAll || !validIdentify) {
  
  
          // ScrolltoView
  
          return;
        }
  
  
        try {
          this.setOrganizationRelation();
          let user = this.isCreationForm ? await this.createUser() : await this.updateUser();
          this.notify.success(this.$t(`notifications.account.userManagement.${ this.isCreationForm ? 'created':'edited'}`, {
            firstName: user.firstName,
            lastName: user.lastName
          }))
          this.redirect(this.nav.dashboard.account.users.view.name, {
            id: user._id
          })
        } catch (e) {
          if (e.response &amp;&amp; e.response.status === 400) {
            e.response.data.violations.forEach(violation =&gt; {
              if (violation.propertyPath === 'username') return; //TODO temporary workaround, remove it when we get correct response from server
              this.$validator.errors.add({
                id: violation.propertyPath,
                field: violation.propertyPath,
                msg: violation.message
              });
  
  
              const field = this.$validator.fields.find({
                name: violation.propertyPath
              });
  
              if (!field) {
                throw `Field "${violation.propertyPath}" in "${this.$options._componentTag}" component don't have validation on client side!`;
              }
  
              field.setFlags({
                invalid: true,
                valid: false,
                validated: true
              });
            });
          } else {
            this.notify.processUnhandledError(e);
          }
        }
  
      },
      async createUser() {
        return await this.requestCreateUser({ ...this.form,
          password: passwordGenerator.generate()
        });
      },
      async updateUser() {
        return await this.requestUpdateUser(this.form)
      },
      cancel() {
        this.goBack();
      },
  
      validateIdentify() {
        if (!this.form.email &amp;&amp; !this.form.mobile) {
          const fields = (({
            email,
            mobile
          }) =&gt; ({
            email,
            mobile
          }))(this.$refs);
          Object.keys(fields).forEach((key) =&gt; {
            let field = this.$validator.fields.find({
              name: fields[key].name
            });
  
            this.$validator.errors.add({
              id: field.id,
              field: field.name,
              msg: this.$t('modules.forms.m-form-user.sections.contacts.emptyContacts')
            });
  
            field.setFlags({
              invalid: true,
              valid: false,
              validated: true
            });
  
            this.$refs.emailBlock.open();
            this.$refs.mobileBlock.open();
          });
          return false;
        }
        return true;
      },
      setOrganizationRelation() {
        const rel = {
          organization: this.$user.relationships.organization
        };
        setRelations(this.form, rel)
      }
    }
  } &lt;
  /script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;m-block-form-fields :required="false"&gt;
    &lt;template #title&gt;
                      {{$t('modules.forms.m-form-user.sections.personal.title')}}
                  &lt;/template&gt;
  
    &lt;template&gt;
                      &lt;v-layout wrap&gt;
                          &lt;v-flex xs12&gt;
                              &lt;e-input-user-name v-model="form.firstName" rules="required" required-style/&gt;
                          &lt;/v-flex&gt;
                          &lt;v-flex xs12&gt;
                              &lt;e-input-user-surname v-model="form.lastName" rules="required" required-style/&gt;
                          &lt;/v-flex&gt;
                          &lt;v-flex xs12&gt;
                              &lt;e-input-user-position-function v-model="form.position"/&gt;
                          &lt;/v-flex&gt;
                      &lt;/v-layout&gt;
                  &lt;/template&gt;
  &lt;/m-block-form-fields&gt;</code></pre>
  </div>
  </div>
  </p>