title: Wait for Ajax response data in Vue.js
body: <p>I have a Vue component where I am trying to fetch some data from an API using axios.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          This is Default child component
          {{tools[0].name}}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { CustomJS } from '../js/custom.js';
  
  export default {
    name: 'HomeContent',
    props: {
      tools: []
    },
    methods: {
        fetchData() {
          const customJs = new CustomJS();
          return customJs.getTools();
        }
    },
    created() {
      this.tools = this.fetchData(); //preferably need to wait here wait for response
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>getTools()</code> function is in a different JS file outside the Vue component file which makes the API call using axios.get.</p>
  
  <pre><code>getTools(id = 0){
      this.apiTool += (id &gt; 0) ? id : '';
      axios.get(this.apiTool, {
      })
      .then(function (response) {
          console.log(response.data);
          return response.data;
      })
      .catch(function (error) {
          console.log(error);
      });
  }
  </code></pre>
  
  <p>The problem is, <code>{{tools}}</code> is undefined since the <code>getTools()</code> takes some time to return the response data. How can wait for the response data and then return?</p>