JSFiddle - React, Tailwind, and code Playground

HTML

<ul data-bind="with: vm.items">
    <!-- ko foreach: $data -->
    <li><span data-bind="text: ko.utils.arrayIndexOf($parent, $data)"></span>
        <span data-bind="text: name"></span>
    </li>
    <!-- /ko -->
</ul>

JavaScript

vm = {
    items: ko.observableArray( [
        {name: ko.observable("a")},
        {name: ko.observable("b")},
        {name: ko.observable("c")},
    ])
}
      
ko.applyBindings(vm);

vm.items.splice(2,0, { name: ko.observable('test')});