Data fetching from database using laravel and vuejs
<p>I am trying to fetching data from database using Laravel and Vue.js. 
Result I am getting is none. But firebug console shows the response. Please find the attached image. Please check my code and correct me. <a href="https://i.stack.imgur.com/lwbyo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwbyo.jpg" alt="Click Here"></a></p>

<p><strong>data.blade.php</strong></p>

<pre><code>@extends('layouts.app')

@section('title', 'Customers List')

@section('styles')
@endsection

@section('content')
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-10 col-md-offset-1"&gt;
                &lt;div class="panel panel-default"&gt;
                    &lt;div class="panel-heading"&gt;Customers List&lt;/div&gt;
                    &lt;div class="panel-body"&gt;
                        &lt;table class="table table-hover table-bordered" id="app"&gt;
                            &lt;thead&gt;
                            &lt;tr&gt;
                                &lt;th&gt;#&lt;/th&gt;
                                &lt;th&gt;Name&lt;/th&gt;
                                &lt;th&gt;Reference ID&lt;/th&gt;
                                &lt;th&gt;Action&lt;/th&gt;
                            &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                            &lt;?php
                            $i=1;
                            ?&gt;
                            &lt;tr v-for="message in messages"&gt;
                                &lt;td&gt; {{ $i }} &lt;/td&gt;
                                &lt;td&gt; @{{ message.name }} &lt;/td&gt;
                                &lt;td&gt; @{{ message.reference_id }} &lt;/td&gt;
                                &lt;td&gt;&lt;a href="/customers/list/process/" class="btn btn-primary btn-xs" role="button"&gt;Click Here&lt;/a&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;?php $i++; ?&gt;
                            &lt;/tbody&gt;
                        &lt;/table&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
@endsection

@section('scripts')
    &lt;script src="/js/vue.js"&gt;&lt;/script&gt;
    &lt;script src="/js/vue-resource.min.js"&gt;&lt;/script&gt;
    &lt;script src="/js/customers.js"&gt;&lt;/script&gt;
@endsection
</code></pre>

<p><strong>customers.js</strong></p>

<pre><code>new Vue({
    el: '#app',

    ready: function() {
      this.fetchMessages();
    },

    methods: {
        fetchMessages: function() {
            this.$http.get('/customers/list/data', function(messages) {
                alert(messages);
                this.$set('messages', messages);
            });
        }
    }
});
</code></pre>

<p><strong>Controller</strong></p>

<pre><code>public function showCustomersData()
    {
        $listCustomers             = Customer::select('id', 'name', 'reference_id')
            -&gt;orderBy('id', 'desc')
            -&gt;get();
        return response()-&gt;json(['messages' =&gt; $listCustomers]);
    }
</code></pre>

<p><strong>Route</strong></p>

<pre><code>Route::get('/customers/list/data', [
        'as' =&gt; 'customerListData', 'uses' =&gt; 'CustomerController@showCustomersData'
    ]);
</code></pre>