Knockoutjs: как я могу сделать входное значение, добавленное в список, также наблюдаемым

Не уверен, что я правильно формулирую это.

У меня есть observableArray, и я могу добавить в этот массив входные данные, а также удалить элемент списка. но если я изменю созданный элемент, я потеряю соединение с массивом. Как я могу сохранить привязку к массиву?

Скрипка прикреплена

HTML

<div class = "group-settings-container mt-4">
<div class = "row">
<div class = "col-md-3">
  <h4><i class = "fas fa-object-group"></i> Create Groups</h4>
</div>

<div class = "col-md-6">
  <div class = "input-group">
    <input type = "text" class = "form-control create-group-name" data-bind = "value: groupItemToAdd, valueUpdate: 'afterkeydown' " placeholder = "Enter group name" value = "">
    <div class = "input-group-append">
      <button class = "btn btn-primary add-group-btn" data-bind = "click: addGroupItem, enable: groupItemToAdd().length > 0" type = "button"><i class = "fas fa-plus"></i>
                      Add group</button>
    </div>
  </div>
</div>


<div class = "create-groups-container mb-4">
  <ul class = "list-group create-group-list my-2" data-bind = "foreach: allGroupItems">
    <li class = "list-group-item">
      <div class = "input-group">
        <input type = "text" class = "form-control created-group-input" data-bind = "value: $data">
        <div>
          <button class = "btn btn-danger remove-group-item-btn" data-bind = "click: $parent.removeSelectedGroupItem" type = "button"><i class = "fas fa-times"></i>
                        Remove</button>
        </div>
      </div>
    </li>
  </ul>
</div>
<!-- end create groups container  -->

</div>
<!-- end group settings container -->

JS

 function ViewModel() {
 var self = this;
 self.groupItemToAdd = ko.observable("");
 self.allGroupItems = ko.observableArray([]);


 self.addGroupItem = function() {
 if ((self.groupItemToAdd() != "") &&     (self.allGroupItems.indexOf(self.groupItemToAdd()) < 0)) {
  self.allGroupItems.push(self.groupItemToAdd());
  }
  self.groupItemToAdd(""); // clear the input
 }

 self.removeSelectedGroupItem = function(index) {
 // self.allGroupItems.splice(index, 1);
// console.info(self.allGroupItems.splice(index, 1));
self.allGroupItems.remove(index);
}
}
// end ViewModel

ko.applyBindings(new ViewModel());