vue-resource get request not working on Laravel 5.3

It's a fresh Laravel 5.3 installation on MAMP.

I'm trying to fetch data from a json API endpoint with vue-resource's get request. But it's returning an empty array.

Here's my app.js I haven't used any components here.

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

var app = new Vue({
    el: '#main',
    data: { 
        searchString: "",
        articles: []
    },
    ready: function() {
        this.fetchData();
    },
    methods: {
        fetchData: function () {
            this.$http.get('http://localhost:8888/pos/public/api/items',     function(articles) {
                this.$set('filteredArticles', articles);
            });
        }
    },
    computed: {
    // A computed property that holds only those articles that match the searchString.
    filteredArticles: function () {
        var articles_array = this.articles,
            searchString = this.searchString;

        if(!searchString){
            return articles_array;
        }

        searchString = searchString.trim().toLowerCase();

        articles_array = articles_array.filter(function(item){
            if(item.title.toLowerCase().indexOf(searchString) !== -1){
                return item;
            }
        })

        // Return an array with the filtered data.
        return articles_array;;
    }
}
}); 

Here's the html form the view:

<div class="col-md-3" id="main">
    <label for="Search">Search Item</label>
        <div class="form-group">
            <input type="text" v-model="searchString" placeholder="Search here" />
        </div>
        <ul>
            <li v-for="article in filteredArticles">@{{ article.id }}</li>      
        </ul>

</div>

Any help is highly appreciated.

Thank You

There are a few issues here, firstly as Belmin said, laravel comes with Vue 2 and ready() is a Vue 1 lifecycle hook, instead you need to use the created lifecycle hook

Secondly, the correct syntax for Vue-router is:

  // GET /someUrl
  this.$http.get('/someUrl').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });

The second parameter is for passing options, not for the success callback:

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

You can find more about this on the Vue-Router Github page

So you should end up with this:

//...
  created: function() {
    this.fetchData();
  },
  methods: {
    fetchData: function() {
      this.$http.get('http://localhost:8888/pos/public/api/items').then(function(articles) {
        this.filteredArticles = articles
      });
    }
  },
//...

Here's a JSFiddle to show the correct syntax: https://jsfiddle.net/mLjajttz/