Why does vuejs remove an element from the end?

Question

Vue.js

There is a problem, vue removes the last element of the array, ignoring the specified index, maybe I made a mistake somewhere?

<div id="segment">
  <button @click="add()">
Add
</button>
  <div v-for="(item, index) in conditionList" v-bind:key="conditionList.id">
    <select class="form-control" style="min-width: 175px;" v-model="selectField[index]">
           <optgroup v-for="(category, key) in categories"  :label="category" >
                <template v-for="(labels, title) in nameFields">
                     <option v-for="(label, name) in labels"
                                   :value="name"
                                    v-if="title == key"
                                    :disabled="selectField.includes(name)" >
                                       {{label}}
                     </option>
                </template>
           </optgroup>
    </select>
    <button @click="conditionList.splice(index, 1)">
      Delete
    </button>
  </div>
</div>

new Vue({
  el: '#segment',
  data: {
    conditionList: [{
      id: 1,
    }, ],
    nextId: 2,
    selectField: [],
    categories: {
      "groups": "Группы",
      "fields": "Поля",
      "statistic": "Статистика"
    },
    nameFields: {
      "groups": {
        "groups": "Группы"
      },
      "fields": {
        "email": "Email",
        "name": "Имя",
        "last_name": "Фамилия",
      },
      "statistic": {
        "opens": "Открыли",
        "transitions": "Переходы",
        "sent": "Отправлено",
        "mailing": "Рассылка"
      }
    },
  },
  methods: {
    add: function() {
      this.conditionList.push({
        id: this.nextId++,
      })
    }
  }
})

Answer 1

Deleted where necessary, the problem is that you separated the data from the values ​​of the selects and their id. Remove one and keep the other. Store the value in the same object as id. That is, you cut out selectField and v-model="selectField[index]"replace it with v-model="item.value", for example, but selectField.includes(name)with conditionList.some(n => n.value === name).

Answer 2

1) It looks strange, you have an object with an id in the conditionList array, but there is no id in the conditionList itself. Perhaps this is the problem.
v-bind:key="conditionList.id"
2)

vue remove element from object

So all the same, are you deleting from an array or from some object?