JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<div>
  <ul>
    <li v-for="item in newsListData">
      <span v-text="item.title"></span>
    </li>
  </ul>
</div>

JavaScript

'use strict';

// https://vuejs.org/guide/index.html

var newsListData = [
  {
    "group" : "science",
    "title" : "Text 1",
    "image" : "images/news1.jpg",
    "content" : "Text text text"
  },
  {
    "group" : "science",
    "title" : "Text 2",
    "image" : "images/news2.jpg",
    "content" : "Text text text"
  },
  {
    "group" : "science",
    "title" : 'Text 3',
    "image" : "images/news3.jpg",
    "content" : "Text text text"
  },
  {
    "group" : "economics",
    "title" : 'Text 4',
    "image" : "images/news4.jpg",
    "content" : "Text text text"
  }
];
  
let vm = new Vue({
	el: 'body',
  data: {
  	newsListData
  }
});

vm.newsListData.push({
	title: "foo"
});