JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="with: items">
<div id="items" data-bind="template: { foreach: $data }">
  <div data-bind="text: $data"></div>
</div>
</div>
<button data-bind="click: reorder_array">Reorder array</button>
<button data-bind="click: reorder_dom">Reorder DOM</button>
<div>
  Reorder the array twice, then reorder DOM twice. This should work as expected, and end up with the initial state.
  Then, try to reorder the array again. It should not work. Why?
</div>

JavaScript

(init => {
	ko.bindingHandlers.template.init = (...args) => {
  	console.log('template init');
    return init(...args);
  };
})(ko.bindingHandlers.template.init);
let vm = {
	items: ko.observableArray(['item1', 'item2']),
  reorder_array() {
  	vm.items([vm.items()[1], vm.items()[0]]);
  },
  reorder_dom() {
  	let parent = document.querySelector('#items');
    parent.insertBefore(parent.children[1], parent.children[0]);
  }
};
ko.applyBindings(vm);