WP Rest API with vue.js - wordpress

Question

I am not sure what I am doing wrong here, still pretty noob at vue js so that might be the problem.
The problem is that it does not display anything. I got it to work with older vue version with a bit different code, but yeah...
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data: function(){
return {
posts: ''
}
},
mounted: function(){
posts = this.$http.get('/wp-json/wp/v2/posts?per_page=10');
posts.get(function(posts){
this.$set('posts', posts);
})
}
});
var router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: postList}
]
});
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
});
HTML is here if that makes things a bit easier to understand :
<div class="container-fluid projects" id="projects">
<h1 class="text-center project-heading">Projects</h1>
<div class="white-wrap">
<div id="app">
<router-view></router-view>
</div>
</div>
<template id="post-list-template">
<div class="container">
<div class="post-list">
<article v-for="post in posts">
<div class="post-content">
<h2>{{ post.title.rendered }}</h2>
{{ post.id }}
</div>
</article>
</div>
</div>
</template>
</div>

Answer 1

This resolved my problem:
var postLists = Vue.component('post-list',{
template:'#post-list-template',
data: function () {
return {
posts:'',
}
},
mounted:function () {
this.$http.get('./wp-json/wp/v2/posts').then(response => {
// get body data
this.posts = response.body;
this.posts.forEach(function (){
} );
}, response => {
console.log('Not Found');
});
}
});
//router
var router = new VueRouter({
routes: [
{ path: '', component: postLists },
]
});
new Vue({
el: '#app',
router: router,
});