Ajouter dans un composant en vue js

Bonjour, j'essaye d'ajouter un nouveau attribut en vue js, j'ai trouver plusieurs technique mais cela ne fonctionne pas, et je commence a tournée en rond.
Voici mon code pour mieux comprendre ...
De base j'avais ceci :

function addNews(parent, news) {
 var vm = new Vue({
  el:'#allNews',
   data:{
    posts:[
       {"ID": 1, "title": "News 1", "content" : "Super news 1"},
       {"ID": 2, "title": "News 2", "content" : "Super news 2"},
       {"ID": 3, "title": "News 3", "content" : "Super news 3"}
    ]
   },

 });
}

De cette façon s’ajouter tout mes attribut en une seul fois mais j'aimerais les ajouter un à un pour que ce soit plus dynamique j'ai donc essayer des chose comme ça :

"news corresponds à ceci : {"ID": 1, "title": "News 1", "content" : "Super news 1"}

function addNews(parent, news) {
 var vm = new Vue({
    data:function(){          
        this.posts.push({ID: news['ID'] , title: news['title']  , content: news['content'] }); //1ere façon
    }, 
   el:'#allNews',
   data:{
       posts:[
       ]
   },

  });
  Vue.set(vm.someObject, 'posts', news) // 2ème ...
}

Mais cela ne fonctionne pas ...
Quelqu'un pourrais m'éclairer sur la raison de ce problème ?
Merci d'avance pour votre aide.