Laravel blade with Vue component not show data - development

Laravel blade with Vue component not show data

I am using Laravel 5.6 and create model named process and a controller with a function that gets all the records of the model:

public function showProcessList(){
    return response()->json(Process::all());
}

In the web.php routes file also defined the route to retrieve the records, it works well, i tested the endpoint and i can see the data:

Route::get('process/list', 'ProcessController@showProcessList');

In a blade file i try to show the list creating a Vue component like this:

<!-- Process List -->
<div class="row">
<process></process>
</div>
<script src=''></script>

file app.js has this:

window.Vue = require('vue');

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

Vue.component('process', require('./components/Process.vue'));

const app = new Vue({
    el: '#app'
});

components/Process.vue contains this:

<template>     
   <div class="tile mb-4 col-md-6 col-lg-12" id="listProcess">
       <div class="page-header">
            <h3 class="mb-4 line-head">Process List</h3>
       </div>
       <div v-for="process in processList">
           <p></p>
       </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data () {
            return {
                processList: [],
            }
        },

    created() {
       this.showProcessList();
    },

    methods: {
        showProcessList () {
            axios.get('/process/list')
            .then(response => {
               this.processList = response.body;
             });

        }
    },
 }
</script>

Then execute npm run dev and load in web browser the view that invoke the Vue component:

<div class="row">
    <process></process>
</div>
<script src=''></script>

(I have to add public folder to the path of css and js files)

nothing happens, the data doesn’t load in the view and i cannot see any error in console.

Testing the endpoint the result is:

[
  {
    "id": 1,
    "created_at": "2018-03-28 04:33:02",
    "updated_at": "2018-03-28 04:33:02",
    "name": "first_process",
  },
]

So, at this point i cannot see where is the error in my code or what i missing?

Thanks.

from Laravel Questions and Answers https://laravelquestions.com/php/laravel-blade-with-vue-component-not-show-data/
via Lzo Media