Iterate object list with VueJs from Django API - django

Question

I try to iterate through a Django Rest API object list using VueJS. I can get the articles json list but I can't correctly view VueJs template component. In my Django views I use
<section class="blog-post-wrap medium-padding80">
<div class="container">
<div class="row">
<div id="starting">
<div class="" v-for="article in articles">
<articlelist title="article.title"></articlelist>
</div>
</div>
</div>
</div>
</section>
And I use VueJs component template
Vue.component('articlelist', {
template: `
<div class="col col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
<div class="ui-block"
<div class="post-content">
THE COMMUNITY
{{title}}!
<p>Here’s a photo from last month’s photoshoot. We got really awesome shots for the new catalog.</p>
</div>
<!-- ... end Post -->
</div>
</div>
`,
props: ['title']
});
new Vue({
el: '#starting',
delimiters: ['${','}'],
components:{
'articlelist': articlelist,
},
data: {
articles: [],
loading: false,
currentArticle: {},
message: null,
newArticle: {
'title': null,
'content': null,
},
},
mounted: function() {
this.getArticles();
},
methods: {
getArticles: function() {
this.loading = true;
this.$http.get('/api/articles/')
.then((response) => {
this.articles = response.data;
console.log(response.data);
this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
getArticle: function(id) {
this.loading = true;
this.$http.get(`/api/articles/${id}/`)
.then((response) => {
this.currentArticle = response.data;
this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
addArticle: function() {
this.loading = true;
this.$http.post(`/api/articles/`,this.newArticle)
.then((response) => {
this.loading = false;
this.getArticles();
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
updateArticle: function() {
this.loading = true;
this.$http.put(`/api/articles/${this.currentArticle.article_id}/`, this.currentArticle)
.then((response) => {
this.loading = false;
this.currentArticle = response.data;
this.getArticles();
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
deleteArticle: function(id) {
this.loading = true;
this.$http.delete(`/api/articles/${id}/` )
.then((response) => {
this.loading = false;
this.getArticles();
})
.catch((err) => {
this.loading = false;
console.log(err);
})
}
}
});
I am aware that I could not manage to correct the naming of components and scripts but I can not find the correct way.
When I check chrome dev tools, I see error :
Uncaught ReferenceError: articlelist is not defined
Can you help me ?
Thanks