title: Vue.js and async function call
body: <p>I have the following Vue.js component:</p>
  
  <pre><code>module.exports = {
      data: function () {
          return { 
               searchText: "",
               searchResult: []
          }
      },
      watch:
      {
          searchText: function() {
              this.searchResult = this.search()
          }
      },
      methods:
      {
          search: function()
          {
              var result = [];
              var _self = this;
  
              $.getJSON("data/data.json", function(json) {                   
                  $.each(json, function(index, obj) {
                      if (_self.searchText.length &gt; 0 &amp;&amp; obj.text.indexOf(_self.searchText) != -1)
                          result.push(obj);
                  }, this);
              });
  
              return result;
          }
      }
  }
  </code></pre>
  
  <p>This code works well, but I don't understand why: </p>
  
  <p>Why <code>search()</code> doesn't return an empty array without waiting for the result of <code>$.getJSON()</code> which is an asynchronous function? Surprisingly (for me), it only returns after the callback function is completed.</p>