Динамическое добавление/удаление

Изображение gif

Пробую реализовать добавление/удаление столбцов, а так же изменение значений свойств id и name в массиве. Но происходит некорректное удаление, удаляется последний элемент, что видно на скриншоте

Удалял второй объект / Удалился четвертый объект

Разметка:

<div style="width:200px" v-for="analog in analogs" :key="analog.id">    
     <label style="font-size:12px"> {{ analog.name }} </label>&nbsp;  
     <a @click="deleteRow(analog.id)" style="color:red"><b>X</b></a>  
     <input type="text" class="form-control" style="font-size:12px; width:150px" />
</div>

Код реализации добавления/удаления и изменения свойств id и name после удаления выбранного элемента:

<script>
    export default {
        name: 'objectcalculationprice-component',
        data() {
            return {
                index: 1,
                analogs: []
            }
        },
        methods: {
            addRow()
            {
                this.analogs.push({
                    id: this.index - 1,
                    name: 'Аналог № ' + this.index,
                });
                this.index++;
            },
            deleteRow(item) {
                this.analogs.splice(item, 1);

                this.index--;

                this.analogs.map((a, i) => {
                    if (i != a.id) {
                        console.log("Строка изменяемого объекта", i)
                        console.log("ID изменяемого объекта", a.id)

                        a.id = i;
                        a.name = "Аналог № " + (i + 1);
                    }
                });
            }
        }
    }
</script>

В консоли удаляется объект с верным id. Возможно что-то упускаю...

Решение найдено.