Laravel 5.3 with Vuejs ajax call
<p>Trying to get some data from database using Vuejs. There are some dummy data in my users table. I want to show them in my view. Problem is though the page loads, It cannot fetch the data from the users table. It does not give any console error. I have checked database connection, restarted server and also checked api data with postman. It's working fine. </p>

<p>Views: </p>

<p>layout.blade.php</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title"&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;div class="container"&gt;
      @yield('content')
    &lt;/div&gt;

    &lt;!-- scripts --&gt;
    &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.2/vue-resource.min.js" charset="utf-8"&gt;&lt;/script&gt;
    @yield('scripts')
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>fetchUser.blade.php</p>

<pre><code>@extends('layout')
@section('content')

&lt;div id="UserController"&gt;

  &lt;table class="table table-hover table-striped"&gt;
    &lt;thead&gt;
      &lt;th&gt;Id&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Email&lt;/th&gt;
      &lt;th&gt;Address&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr v-for="user in users"&gt;
          &lt;td&gt;@{{ user.id }}&lt;/td&gt;
          &lt;td&gt;@{{ user.name }}&lt;/td&gt;
          &lt;td&gt;@{{ user.email }}&lt;/td&gt;
          &lt;td&gt;@{{ user.address }}&lt;/td&gt;
          &lt;td&gt;@{{ user.created_at }}&lt;/td&gt;
          &lt;td&gt;@{{ user.updated_at }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

&lt;/div&gt;

@endsection
@section('scripts')
&lt;script src="{{ asset('js/script.js') }}" charset="utf-8"&gt;&lt;/script&gt;
@endsection
</code></pre>

<p>script.js</p>

<pre><code>var vm = new Vue({
    el: '#UserController',

    methods: {
      fetchUser: function(){
          this.$http.get('api/users', function(data) {
              this.$set('users', data )
          })
      }
    },

      ready: function(){

    }
});
</code></pre>

<p>web.php</p>

<pre><code>Route::get('/', function () {
    return view('fetchUser');
});
</code></pre>

<p>api.php</p>

<pre><code>&lt;?php

use Illuminate\Http\Request;
use App\User;
Route::get('/users', function(){
    return User::all();
});
</code></pre>