Vuejs edit

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <div class="container">
    <div>
      <h3>Select an object from an array 'list' by clicking on Action (Edit or Delete) to see its name        in the Edit box;<br>Edit the Name in the box and click Edit to update the selected        array element.
      </h3>
    </div>
    <div v-for=" a in array">
        {{a}}
    </div>
    <p><br></p>
    
    <form class="form-horizontal" @submit.prevent="doEdit(record)">
      <div class="row">
        <div class="col-md-8">
          <label v-if="editing">
          Selected Index: {{this.editIndex}}
          </label>
          <label v-if="editing">
          Selected Id: {{this.editId}}
          </label> 
          <label v-if="editing">Selected Name for editing: </label>
          <input v-if="editing" type="text" class="form-control" v-el:record-name 
          v-model="editText">
        </div>
        <div class="col-xs-8" style="margin-top:15px">
         <button type="submit" class="col-xs-12 btn btn-success">Edit</button>
        </div>
      </div>
    </form>
    <h3>New Name</h3>
    <p>
    <input type="text" v-model="addText" placeholder="Add new name here" />
    <button v-on:click="addName()" class="btn btn-primary btn-sm">Add Name</button>
    </p>
    <hr>
    <table class="table table-striped table-bordered">
       <thead>
         <tr>
           <th>Index</th>
           <th>Id</th>
           <th>Name</th>
           <th>Edit</th>
           <th>Delete</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(a, index) in array">
           <td class="text-left" style="width:60px"> {{ index }} </td> 
           <td class="text-left" style="width:60px"> {{ a.id }} </td>
          ...

JavaScript

new Vue({
	el: '#app',
  data: {
    addText: '',
    editText: '',
    editId: '',
    editIndex: -1,
    editing: false,
    record: {},
    array: [
        { name: 'Google', id: 1 },
        { name: 'Facebook', id: 2 },
        { name: 'Twitter', id: 3 },
      ],
  },
  methods: {
    addName: function() {
    	var highestId = 0
      //console.log('array.length: ' + this.array.length);
       if ( this.array.length > 0)
           (
           	highestId = Math.max.apply(Math, 	      this.array.map(function(p) { 
      	   	return p.id;
           	})));
            else highestId = 0;
  		//console.log('highestId: ' + highestId)
      var newName = this.addText.trim();
			if (!newName) {return;}
			this.array.push(
				{name: newName, id: highestId + 1}
			);
			this.addText = '';
		},
    getArray1: function (selArray, selindex) {
      this.record = selArray;
      this.editText = selArray.name;
      this.editing=true;
      this.editId=selArray.id;
      this.editIndex=selindex;
    },
    doEdit: function (record) {
      Vue.set(record, 'name', this.editText);
      this.editText = '';
    this.editing=false;
    },
    del: function (index) {
      //console.log('In del - index = ' + ind)   
      if(confirm("Are you sure want to delete this Name?")){
      this.$delete(this.array, index)}
    }
  } 
});