JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<div class="group">
    <h1>Original observableArray</h1>
    All is well.  Simple reference to the observableArray, without an unwrap call in the data-bind.
    <ul data-bind="sortable: { data: obsArr }">
        <li data-bind="text: name"></li>
    </ul>
</div>
<div class="group">
    <h1>Using arrayFilter</h1>
    causes error after drag, because array is not observable
    <ul data-bind="sortable: { data: obsArr.filtered }">
        <li data-bind="text: name"></li>
    </ul>
</div>
<div class="group">
    <h1>Unwrapping (in data-bind) arrayFilter results</h1>
    causes item to disappear after drag, because array is not observable
    <ul data-bind="sortable: { data: obsArr.filtered() }">
        <li data-bind="text: name"></li>
    </ul>
</div>
<div class="group">
        <h1>Unwrapping (in data-bind) returned observableArray of arrayFilter results</h1>
    Thought it'd be enough to be an observableArray, like the initial array, but now we need to unwrap in the data-bind??
    <ul data-bind="sortable: { data: obsArr.filteredObsArray() }">
        <li data-bind="text: name"></li>
    </ul>
</div>

CSS

.group {
    border: 1px solid #000;
    margin: 10px 0px;
    padding: 5px;
}
.group li {
    background: #999;
    margin: 3px 0px;
    padding: 3px;
}

.unfiltered li {
    background: #CCC;
}
h1 {
    font-weight: bold;
}
}

JavaScript

var myItem = function (name) {
    this.name = ko.observable(name);
}

var ViewModel = function () {
    var self = this;
    this.obsArr = ko.observableArray([new myItem('one'), 
                                      new myItem('two'), 
                                      new myItem('three'),
                                      new myItem('four'), 
                                      new myItem('five'), 
                                      new myItem('six'),
                                      new myItem('seven')]);
    
    this.obsArr.filtered = ko.computed(function(){
        return ko.utils.arrayFilter(this.peek(), function(item) {
            return item.name.peek() !== 'one';
        });
    }, this.obsArr);
    
    this.obsArr.filteredObsArray = ko.computed(function(){
        var x = ko.utils.arrayFilter(this.peek(), function(item) {
            return item.name.peek() !== 'one';
        });
        return ko.observableArray(x);
    }, this.obsArr);
    
};
ko.applyBindings(new ViewModel());