JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <ul>
  <li v-for="elem in list" :key=elem.id>{{ elem.title }} <a href="#" @click.prevent="edit(elem)">edit</a></li>
  </ul>
  <a href="#" @click.prevent="add">add</a>
  <b-modal ref="edit" size="sm" @ok="update(editing)">
    <form v-if="editing" @submit.prevent="update(editing)">
      <b-form-input v-model=editing.title></b-form-input>
      если нажать отмена, то title все равно изменится, если делать не через JSON
    </form>
  </b-modal>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    list: [],
    maxId: 0,
    editing: undefined
  },
  methods: {
    add: function() {
			this.list.push({id:this.maxId++, title:'title'});
    },
    edit(elem) {
    	this.editing = elem;
    	//this.editing = JSON.parse(JSON.stringify(elem));
      this.$refs.edit.show();
    },
    update(data) {
    	this.list = this.list.map(item => {
      	return item.id === data.id ? data : item;
      });
      this.$refs.edit.hide();
    }
  }
})