Edit in JSFiddle

new Vue({
  el: "#app",
  data: {
    items: [{
       name: '',   
       adds: '',  
       tel: '',   
     }]
  },
 methods: {
  del: function(index) {
    this.items.splice(index, 1);
    this.geLength();
  },
  add: function(index) {
    this.items.splice(index+1, 0, {
      name: '',
      adds: '',
      tel: '',
    });
    console.log(this.items)
    this.geLength();
  },
  geLength: function() {
    this.len = this.items.length - 1;
  }
},
created: function() {
  this.geLength();
}
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<div id="app">
  <div class="main" v-for="(item, index) in items" :key="index">
    <div class="main-name">
      <input type="text" v-model="item.name">
    </div>
    <div class="main-adds">
      <input type="text" v-model="item.adds">
    </div>
    <div class="main-tel">
      <input type="text" v-model="item.tel">
    </div>
    <div class="main-btn">
      <button @click="add(index)" v-if="index===len">O</button>
      <button @click="del(index)" v-else>X</button>
    </div>
  </div>
</div>