title: (Vue) Axios set data not working with 2 properties. I can't explain why
body: <p>I have the weirdest bug I have ever encountered. I am using Axios and Vee-Validate in my Vue project and from my api I get an error. So withing axios I have a catch.</p>
  
  <p>example:</p>
  
  <pre><code>this.$http.post('v1/auth/register', {
                  first_name: this.first_name,
                  last_name: this.last_name,
                  email: this.email,
                  phone: this.phone,
                  password:this.password
              }).then((response) =&gt; {
                  this.registration_card = 2;
              }).catch((error) =&gt; {
  
                  if(error.data.error.message === "email_already_exists") {
                      let input = this.$refs['email'].$children[0];
                      input.errors.add({ field: 'email', msg: 'email already is use'});
                      this.loading = false;
  
                      console.log(input.errors);
                      console.log(this.loading);
                  }
  
              });
  </code></pre>
  
  <p>Now here comes the weird part. With this code:</p>
  
  <pre><code>let input = this.$refs['email'].$children[0];
      input.errors.add({ field: 'email', msg: 'email already is use'});
  
  this.loading = false;
  </code></pre>
  
  <p>the input.errors is still empty and error wil not be displayed. BUT when i do this:</p>
  
  <pre><code>let input = this.$refs['email'].$children[0];
      input.errors.add({ field: 'email', msg: 'email already is use'});
  
   // this.loading = false;
  </code></pre>
  
  <p>So this.loading will NOT get set, then the error will get set and displayed in my view. </p>
  
  <p>But I want this.loading still be false because I want my loading icon not be displayed. Anyone have a explanation about this.</p>
  
  <p>EDIT: More code</p>
  
  <pre><code>methods: {
      register: function () {
          let anyError = false;
          this.$validate(this, ['first_name', 'last_name', 'phone', 'email', 'password'], function (value, last_item) {
  
              this.loading = true;
  
              if (value === false) {
                  anyError = true;
              }
  
              if (anyError || !last_item) {
                  return;
              }
  
              this.$http.post('v1/auth/register', {
                  first_name: this.first_name,
                  last_name: this.last_name,
                  email: this.email,
                  phone: this.phone,
                  password: this.password
              }).then((response) =&gt; {
                  this.registration_card = 2;
              }).catch((error) =&gt; {
                  if (error.data.error.message === "email_already_exists") {
                      let input = this.$refs['email'].$children[0];
                      input.errors.add({field: 'email', msg: 'email already is use'});
                      this.loadingTest = false;
  
                      console.log(input.errors);
                      console.log(this.loadingTest);
                  }
  
              });
  
          }.bind(this));
      },
  }
  </code></pre>
  
  <p>this.$validate does this:</p>
  
  <pre><code>export default function(scope, arrayOfValues, callback) {
  
  let total = arrayOfValues.length - 1;
  let last_item = false;
  
  arrayOfValues.forEach(function(value, index) {
      let input = scope.$refs[value].$children[0];
      input.$validator.validate().then(value =&gt; callback(value, total === index, index));
     });
  }
  </code></pre>
  
  <p>I do this because i have custom input components</p>
  
  <p>EDIT: this is where i am using loading:</p>
  
  <pre><code>&lt;j-button label="Register" :loading="loading" @click.native="register"/&gt;
  </code></pre>
  
  <p>And button coomponent is:</p>
  
  <pre><code>&lt;template&gt;
      &lt;button type="button"&gt;
          &lt;span v-if="!loading"&gt;{{label}}&lt;/span&gt;
          &lt;loading v-if="loading"/&gt;
      &lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import loading from 'vue-loading-spinner/src/components/Circle'
  
  export default {
      name: 'j-button',
      props: [
          'label',
          'loading'
      ],
      components: {
          loading
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>EDIT: Even more code!!!!!</p>
  
  <p>My j-input component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;label v-bind:class="{ 'active': (newValue.length &gt; 0)}"&gt;{{label}}&lt;/label&gt;
          &lt;input v-bind:class="{ 'error': (errors.has(name))}" type="text" :name="name" v-validate="rules" :placeholder="label" v-model="newValue" v-on:input="updateValue()" ref="input"&gt;
          &lt;span v-if="errors.has(name)"&gt;{{errors.first(name)}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'j-text',
          inject: ['$validator'],
          props: [
              'label',
              'name',
              'rules',
              'value',
          ],
          data() {
              return {
                  newValue: ''
              }
          },
          created() {
              this.newValue = this.value;
              this.updateValue();
          },
          methods: {
              updateValue: function () {
                  this.$emit('input', this.newValue);
              },
          }
      }
  &lt;/script&gt;
  </code></pre>