title: Cant display data in datatable using vue axios
body: <p>I dont know why my data wont show in my datatable but when I check the console and the vue tool i can see my data. When I compile my js files it wont show me an error. Im just using the datatable and used <code>$('#example').DataTable();</code> function then i used <code>v-for</code> in the <code>&lt;td&gt;</code> for showing the data. Thanks for the help! </p>
  
  <p><a href="https://i.stack.imgur.com/dA1dl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dA1dl.png" alt="console http request"></a></p>
  
  <p><a href="https://i.stack.imgur.com/1duUW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1duUW.png" alt="vue tool"></a></p>
  
  <p>Users.vue</p>
  
  <pre><code>   &lt;table id="example" class="table table-striped table-bordered"&gt;
                        &lt;thead&gt;
                          &lt;tr&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;Type&lt;/th&gt;
                            &lt;th&gt;Created&lt;/th&gt;
  
                          &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                      &lt;tr v-for="user in users.data" :key="user.id"&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.type}}&lt;/td&gt;
                          &lt;td&gt;{{user.created_at}}&lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/tbody&gt;
                  &lt;/table&gt;
  
  
  &lt;script&gt;
      export default {
         data() {
      return {
        editmode: false,
        users: {},
        form: new Form({
          id:'',
          name: "",
          email: "",
          password: "",
          type: "",
        })
      };
    },
    methods: {
        loadUsers(){
             axios.get("api/user").then(({ data }) =&gt; (this.users = data));
        }
    },
      created() {
              console.log('Component mounted.')
              this.loadUsers()
          }
      }
  
  
      $(document).ready(function() {
      $('#example').DataTable();
  } );
  &lt;/script&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>
  require('./bootstrap');
  
  import Vue from 'vue'
  import { Form, HasError, AlertError } from 'vform'
  import VueRouter from 'vue-router'
  
  
  window.Vue = require('vue');
  window.Form = Form;
  Vue.use(VueRouter)
  
  const routes = [
      { path: '/users', component: require('./components/Users.vue').default },
      // { path: '*', component: require('./components/NotFound.vue').default}
    ]
  
  const router = new VueRouter({
      mode: 'history',
      routes
    })
  
  
    Vue.component('users', require('./components/Users.vue').default);
  
  
  const app = new Vue({
      el: '#app',
      router
  });
  
  </code></pre>
  
  <p>api.php</p>
  
  <pre><code>Route::apiResource('user', 'API\UserController');
  </code></pre>
  
  <p>UserController.php</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers\API;
  
  use App\igration;
  use Illuminate\Http\Request;
  use App\Http\Controllers\Controller;
  use App\User;
  class UserController extends Controller
  {
      /**
       * Display a listing of the resource.
       *
       * @return \Illuminate\Http\Response
       */
      public function index()
      {
          return User::all();
      }
  
  }
  
  </code></pre>