title: Vue js Ready function is not triggered
body: <p>I have this vue function where there are basically two methods. The first one <code>postStatus</code> is used to save a post just after the user clicks on the save button, and the other one <code>getPosts</code> is used to retrieve all previous posts of that user from the database.</p>
  
  <p>Here is the vue.js, where there is an ajax call to a controller (in Laravel 5.3)</p>
  
  <pre><code>$(document).ready(function () {
  
      var csrf_token = $('meta[name="csrf-token"]').attr('content');
      /*Event handling within vue*/
      //when we actually submit the form, we want to catch the action
      new Vue({
          el      : '#timeline',
          data    :   {
              post    : '',
              posts   : [],
              token   : csrf_token,
              limit   : 20,
          },
          methods : {
              postStatus : function (e) {
                  e.preventDefault();
                  //console.log('Posted: '+this.post+ '. Token: '+this.token);
                  var request = $.ajax({
                      url         :   '/posts',
                      method      :   "POST",
                      dataType    :   'json',
                      data        :   {
                          'body'  :   this.post,
                          '_token':   this.token,
                      }
                  }).done(function (data) {
                      //console.log('Data saved successfully. Response: '+data);
                      this.post = '';
                      this.posts.unshift(data); //Push it to the top of the array and pass the data that we get back
                  }.bind(this));/*http://stackoverflow.com/a/26479602/1883256  and  http://stackoverflow.com/a/39945594/1883256 */
  
                  /*request.done(function( msg ) {
                      console.log('The tweet has been saved: '+msg+'. Outside ...');
                      //$( "#log" ).html( msg );
                  });*/
  
                  request.fail(function( jqXHR, textStatus ) {
                      console.log( "Request failed: " + textStatus );
                  });
              },
              getPosts : function () {
                  //Ajax request to retrieve all posts
                  $.ajax({
                      url         :   '/posts',
                      method      :   "GET",
                      dataType    :   'json',
                      data        :   {
                          limit   :   this.limit,
                      }
  
                  }).done(function (data) {
                      this.posts = data.posts;
                  }.bind(this));
  
              }
          },
          //the following will be run when everything is booted up
          ready : function () {
              console.log('Attempting to get the previous posts ...');
              this.getPosts();
          }
      });
  
  });
  </code></pre>
  
  <p>So far the, first method <code>postStatus</code> is working fine.</p>
  
  <p>The second one is supposed to be called or fired right at the ready function, however, nothing happens. I don't even get the console.log message <code>Attempting to get the previous posts ...</code>. It seems it's never fired.</p>
  
  <p>What is the issue? How do I fix it?</p>
  
  <p>Notes: I am using jQuery 3.1.1, Vue.js 2.0.1</p>