watch vue axios qiita

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8"> 
    <title>Real time search</title>
    <script src="//cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
    <script src="//cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script> 
    <script src="//cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <p><input type="text" v-model="keyword"></p> 
      <p>{{ message }}</p> 
      <ul> 
        <li v-for='item in items'> 
          <a v-bind:href='item.url' target="_blank">{{ item.title }}</a> 
        </li> 
      </ul> 
    </div> 
    <script src="script.js"></script> 
  </body> 
</html>

// Code goes here

var app = new Vue({ 
  el: '#app', 
  data: { 
    items: null, 
    keyword: '', 
    message: '' 
  }, 
  watch: { 
    keyword: function(newKeyword, oldKeyword) { 
      this.message = 'waiting for you stop typing...' 
      this.debouncedGetAnswer() 
    } 
  }, 
  created: function() { 
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000) 
  }, 
  methods: { 
    getAnswer: function() { 
      if (this.keyword === '')
      { 
        this.items = null 
        this.message = '' 
        return 
      } 
      this.message = 'Loadng...' 
      var vm = this 
      var params = { 
        page: 1, 
        per_page: 10, 
        query: this.keyword
      } 
      axios.get('https://qiita.com/api/v2/items', {
        params
      }).then(function(response) { 
        vm.items = response.data 
      }).catch(function(error) { 
        vm.messae = 'Error!' + error 
      }).finally(function() { 
        vm.message = '' 
      }) 
    } 
  } 
})

/* Styles go here */