title: vue-axios `catch` function doesn't trigger when expected
body: <p>I have a Vue app in a single file component which allows the user to lookup a github username and see the fullname, login, and country the user is from.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;form @submit.prevent="search"&gt;
        &lt;input v-model="username" /&gt;
      &lt;/form&gt;
      &lt;p v-if="data"&gt;
        {{ data.name }} ({{ data.login }})
        is from
        {{ data.location }}!
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  
  Vue.use(VueAxios, axios)
  
  export default {
    data() {
      return {
        username: '',
        data: []
      }
    },
  
    methods: {
      search() {
        const api = `https://api.github.com/users/${this.username}`
  
        Vue.axios.get(api).then((response) =&gt; {
          this.data = response.data
        }).catch(error =&gt; {
          console.log(error)
        })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My issue is: I cannot find a way to handle the situation in which the user enters a user that doesn't exist in github. With the <code>catch</code> block of the axios promise, I expect the error to be logged to console, but it isn't. The reason I want to be able to handle this occasion is that I don't want the placeholder text <code>() is from !</code> when either nothing has been searched, or an invalid search has been made.</p>
  
  <p>I tried to use <code>data.length</code> instead of just <code>data</code> for the <code>v-if</code> check, but it seems like my component doesn't 'react' when this is the case; I can see the data change in Vue dev tools but not in the component. What could be happening here?</p>
  
  <p>Here is a webpackbin demo of the app: <a href="http://www.webpackbin.com/VJlfcrGLM" rel="nofollow noreferrer">http://www.webpackbin.com/VJlfcrGLM</a></p>