Ошибка привязки переменной при использовании массива


Vue 2.6

<section id="app">
<h3>
  <div class="btn btn-outline-success btn-sm float-right" v-on:click="addIface"><i class="fa fa-plus"></i> Добавить интерфейс</div>
  <a class="btn btn-outline-secondary btn-sm" href="/tools"><i class="fa fa-chevron-left"></i></a> Настройка сетевого интерфейса</h3>
<hr />

<div class="row" v-for="(iface, ifaceIdx) in ifaces">
  <div class="col py-2">
    <h3>
      <div class="btn btn-outline-danger btn-sm" v-on:click="deleteIface(ifaceIdx)"><i class="fa fa-remove"></i></div>
      Сетевой интерфейс: <b>{{ iface.name }}</b></h3>

    <input type="text" class="form-control" v-model="iface.name">

    <h4 class="mt-3">
      <div class="btn btn-outline-success btn-sm float-right" v-on:click="addAddress(iface)"><i class="fa fa-plus"></i> Добавить адрес</div>
      Адреса <span class="badge badge-primary">{{ iface.addresses.length }}</span></h4>

    <div class="form-group" v-for="(address, addressIdx) in iface.addresses">
      <div class="input-group">
        <input type="text" class="form-control" v-model="address">
        <div class="input-group-append">
          <div class="btn btn-outline-danger" v-on:click="deleteAddress(iface, addressIdx)"><i class="fa fa-remove"></i></div>
        </div>
      </div>
    </div>

  </div>
</div>

<span v-html="ifaces"></span>

</section>

<script>
var app = new Vue({
    el: '#app',
    data: {
        ifaces: [
            {name: 'eth0', addresses: ['192.168.0.1/24']}
        ],
        result: ''
    },
    methods: {
        addIface: function() {
            var vm = this;
            vm.ifaces.push({name: 'eth0', addresses: []});
        },
        deleteIface: function(ifaceIdx) {
            var vm = this;
            vm.ifaces.splice(ifaceIdx, 1);
        },
        addAddress: function(iface) {
            var vm = this;
            iface.addresses.push('192.168.0.1/24');
        },
        deleteAddress: function(iface, addressIdx) {
            // Косяк при удалении/добавлении адреса
            // Сохраняется значение по умолчанию '192.168.0.1/24'
            // Хотя данные были изменены
            iface.addresses.splice(addressIdx, 1);
        }
    }
})
</script>
Ответы

Нужно привязывать не переменную из цикла, а элемент по индексу из массива

<input type="text" class="form-control" v-model="iface.addresses[addressIdx]">