Vue.js - this.$http.get is not working - laravel-5

Question

I am developing project in laravel with Vue js.
below is my code and when I use this.$http.get method of
Vue-resource js I am not getting anything but if I use $.getJSON
method I'm getting all the records from database
brand.blade.php
#section('content')
<div class="container">
<brands></brands>
</div>
<template id="brand-template">
<ul>
<li v-for="brand in list.brand"> #{{ brand }} </li>
</ul>
</template>
#endsection
#push('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<script src = "public/js/brand.js"></script>
#endpush
brand.js
Vue.component('brands',{
template: '#brand-template',
data: function(){
return{
list: []
}
},
created: function(){
this.$http.get('api/brands', function(brand){
// if I use $.getJSON then it'e working perfect and I'm getting all the records
this.list = brand;
}.bind(this));
}
});
new Vue({
el: '.container'
})
Can anyone tell me what's going on I can't figure out.

Answer 1

VueResource returns a response object. Try using .body
var app = new Vue({
el: '#app',
data: {
posts: []
},
mounted: function() {
var vm = this
this.$http.get('https://jsonplaceholder.typicode.com/posts')
.then(function(response) {
vm.posts = response.body
})
}
})
[v-cloak] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<div id="app" v-cloak>
<ul>
<li v-for="post in posts">
{{ post.title }}
</li>
</ul>
</div>