title: Changes to Vue data property do not update in template using async/await and v-for
body: <p>I have a 'errors' property in my data function and it will be populated with errors (key/value pairs) once a error is thrown and caught by a async/await try/catch.  It successfully populates my errors property with the error messages for their respective fields, but it does not reflect that in the template where I'm using v-if/v-for to output the data. Any advice?</p>
  
  <pre><code>&lt;template&gt;
    &lt;form @submit.prevent="onSubmit"&gt;
      &lt;input type="text" v-model="email" placeholder="Email" /&gt;
      &lt;div v-for="(error, index) in errors.email" :key="index"&gt;{{ error }}&lt;/div&gt;
      &lt;br /&gt;
      &lt;input type="text" v-model="username" placeholder="Username" /&gt;
      &lt;div v-if="errors.username"&gt;
        &lt;div v-for="(error, index) in errors.username" :key="index"&gt;{{ error }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;input type="text" v-model="password" placeholder="Password" /&gt;
      &lt;div v-if="errors.password"&gt;
        &lt;div v-for="(error, index) in errors.password" :key="index"&gt;{{ error }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;input type="text" v-model="confirmPassword" placeholder="Confirm Password" /&gt;
      &lt;div v-if="errors.confirmPassword"&gt;
        &lt;div v-for="(error, index) in errors.confirmPassword" :key="index"&gt;{{ error }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;vue-recaptcha
        ref="recaptcha"
        @verify="onVerify"
        @expired="onExpired"
        :sitekey="recaptchaSitekey"
        :loadRecaptchaScript="true"
      /&gt;
      &lt;input type="submit" value="Sign up" /&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import VueRecaptcha from "vue-recaptcha";
  
  export default {
    data() {
      return {
        email: null,
        username: null,
        password: null,
        confirmPassword: null,
        recaptchaSitekey: process.env.VUE_APP_RECAPTCHA_PUBLIC_KEY,
        recaptchaResponse: null,
        errors: {}
      };
    },
    components: {
      VueRecaptcha
    },
    methods: {
      async onSubmit() {
        const formData = {
          email: this.email,
          username: this.username,
          password: this.password,
          confirmPassword: this.confirmPassword,
          recaptcha: this.recaptchaResponse
        };
        try {
          await this.$store.dispatch("signUp", formData);
        } catch (err) {
          err.forEach(e =&gt; {
            this.errors[e.field] = this.errors[e.field] || [];
            this.errors[e.field].push(e.message);
          });
        }
        console.log(this.errors);
      },
      onVerify(response) {
        this.recaptchaResponse = response;
      },
      onExpired() {
        console.log("Expired");
      },
      resetRecaptcha() {
        this.$refs.recaptcha.reset();
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  
  </code></pre>