JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="container" id="app">
  <!-- <pre>{{$data|json}}</pre> -->
  <h1>Todos {{todos.length}}</h1>
  <div class="row">
  <div class="col-sm-12">
    <form v-on:submit.prevent="addNewTodo(newTodo)">
      <div class="form-group col-sm-9 pull-left">
      </div>
      <div class="form-group col-sm-3 pull-right">
        <button class="button">Add Todo</button>
      </div>
    </form>
    </div>
  </div>
  <div class="col-sm-12">
    <ul class="list-group">
      <li class="list-group-item" v-for="(todo, index) in todos">
        <input type="text" class="input" v-model="todo.title">
        
        <button class="button btn-warning btn-xs pull-right"
          v-on:click="deleteTodo(todo,index)">DELETE</button>
      </li>
    </ul>
  </div>
  {{todos}}
</div>

CSS

.row {
  padding: 50px;
}

.list-group {
  padding: 50px;
 
  span {
    min-width: 300px;
    display: block;
    background: red;
  }
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	todos: [
    	{title: 'do Something'}
    ],
    newTodo : {title: ""}
  },
  methods: {
  	addNewTodo(newTodo) {
    	this.todos.push(newTodo);
      this.newTodo = {title:""};
    },
    deleteTodo(todo, index) {
    	this.todos.splice(index, 1);
    }
    
  }
})