title: vuejs will not scroll to top of div on form error
body: <p>I have 2 components on the same page both with a form.  I'm using Vue.js 2.6</p>
  
  <p>The second form has a submit button and when clicked emits a property. The first form is listening for that property and acts on it once received which all works fine. This form hat makes an ajax request to validate a form which also works.</p>
  
  <p>What I am having a problem with is if there are erros in the form, scroll to the top of the form and the submit button is way down in the page.</p>
  
  <p>There are no console errors and all the valiation messages are shown but the form will NOT scroll to the top.</p>
  
  <p>I think the problem lies in here</p>
  
  <pre><code>this.$nextTick(() =&gt; {
      this.$refs.notice.scrollTop = 0;
  });
  </code></pre>
  
  <p>I have tried all the answers i could find on SO but nothing works</p>
  
  <p>This is the first form</p>
  
  <pre><code>&lt;template&gt;
      &lt;form id="contact-form" @submit.prevent="submit" ref="notice"&gt;
          &lt;div class="card mb-4 border-0"&gt;
              &lt;div class="notice notice-danger" v-show="errored"&gt;
                  &lt;strong&gt;Error&lt;/strong&gt; There are errors in the form!!
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-12"&gt;
                      &lt;div class="form-group floating-label-form-group controls"&gt;
                          &lt;label&gt;Contact Name&lt;/label&gt;
                          &lt;input type="text" class="form-control" placeholder="Contact Name" id="contact" v-model="fields.contact" v-on:change="contactChange"&gt;
                          &lt;div v-if="errors &amp;&amp; errors.contact" class="text-danger"&gt;{{ errors.contact[0] }}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-12"&gt;
                      &lt;div class="form-group floating-label-form-group controls"&gt;
                          &lt;label&gt;Telephone&lt;/label&gt;
                          &lt;input type="tel" class="form-control" placeholder="Telephone (optional)" id="telephone" v-model="fields.telephone" v-on:change="telephoneChange"&gt;
                          &lt;div v-if="errors &amp;&amp; errors.telephone" class="text-danger"&gt;{{ errors.telephone[0] }}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-12"&gt;
                      &lt;div class="form-group floating-label-form-group controls"&gt;
                          &lt;label&gt;Email Address&lt;/label&gt;
                          &lt;input type="email" class="form-control" placeholder="Email" id="email" v-model="fields.email" v-on:change="emailChange"&gt;
                          &lt;div v-if="errors &amp;&amp; errors.email" class="text-danger"&gt;{{ errors.email[0] }}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      data: function() {
          return {
              errors: {},
              errored: false,
          }
      },
      mounted() {
          this.$root.$on('checkFormsValid', (customer) =&gt; {
              this.errors = {};
              this.errored = false;
  
              axios.post('/some/url', this.fields).then(response =&gt; {
                  this.$root.$emit('validated', response.data.customer);
              }).catch(error =&gt; {
                  if (error.response.status === 422) {
                      this.errors = error.response.data.errors || {};
                      this.$root.$emit('errors', this.errors);
                      this.errored = true;
  
                      this.$nextTick(() =&gt; {
                          this.$refs.notice.scrollTop = 0;
                      });
                  }
              });
          })
      },
      methods: {
          contactChange: function() {
              delete this.errors.contact;
          },
          telephoneChange: function() {
              delete this.errors.telephone;
          },
          emailChange: function() {
              delete this.errors.email;
          },
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and a slimmed down second form</p>
  
  <pre><code>&lt;template&gt;
      &lt;form id="payment-form" ref="form" action="/checkout" method="POST" class="uk-padding"&gt;
          &lt;button class="btn btn-primary btn-block" @click.prevent="okToSend()"&gt;
              Click me
          &lt;/button&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return {
                  customer: '',
                  loading: false,
              }
          },
          mounted() {
              this.$root.$on('validated', (customer) =&gt; {
                  // do something
              })
          },
          methods: {
              okToSend: function() {
                  this.$root.$emit('checkFormsValid', this.customer)
              }
          }
      }
  &lt;/script&gt;
  </code></pre>