How to remove ??? characters on database query result with Laravel - vuejs2

Question

I am have an issue that sounds new and don't know what is happening. I am retrieving data from database with Laravel eloquent.
In my controller:
public function index()
{
$suppliers = Supplier::all();
return response()->json($suppliers);
}
Its working just fine, the problem is the result object however is appearing as shown below with leading ???. All query results in the entire project is rendering just this way. I have tried to trim the project witn trim() but I realize this wont work on object.
����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������[{"id":1,"first_name":"Ronald","last_name":"Wekesa","mobile_number":"0717245218","work_phone":"07140000","phone_code":254,"fax":null,"email":"email#yaho.com","postal_address":"P.o
Box
323","town":"Kitale","zip":30200,"phisical_address":"Kiminini","company":"Wafutech","created_at":"2018-03-05
11:52:30","updated_at":"2018-03-05
11:52:30"},{"id":2,"first_name":"Ronald","last_name":"Wekesa","mobile_number":"0725645544","work_phone":"070025400","phone_code":2....
when I render the result in my vuejs front end as shown below I am getting blank loop, I mean the loop runs but with empty bullet list. I am suspecting this might have something with this fun behavior.
//My View component
<template>
<div>
<h3>Suppliers</h3>
<div class="row">
<div class="col-md-10"></div>
<div class="col-md-2">
<router-link :to="{ name: 'create-supplier'}" class="btn btn-primary">Add Supplier</router-link>
</div>
</div><br />
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Company</td>
<td>Mobile Phone</td>
</tr>
</thead>
<tbody>
<tr v-for="supplier in suppliers">
<td>{{ supplier.first_name }}</td>
<td>{{ supplier.last_name }}</td>
<td>{{ supplier.company }}</td>
<td>{{ supplier.mobile_number }}</td>
<td><router-link :to="{name: 'edit-supplier', params: { id: supplier.id }}" class="btn btn-primary">Edit</router-link></td>
<td><button class="btn btn-danger" v-on:click="deleteSupplier(supplier.id)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name:'displayAsset',
data(){
return{
suppliers: []
}
},
created: function()
{
this.fetchSuppliers();
},
methods: {
fetchSuppliers()
{
let uri = 'http://localhost/ims/public/api/suppliers';
this.axios.get(uri).then((response) => {
this.suppliers = response.data;
});
},
deleteSupplier(id)
{
let uri = `http://localhost/ims/public/api/suppliers/${id}`;
this.suppliers.splice(id, 1);
this.axios.delete(uri);
}
}
}
</script>
I have tried to re-install laravel but no difference. I have also re-installed my xampp server with the latest version but wan't lucky either. What is causing this and how can I resolve it. Thanks in advance.