JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<span data-bind="text: count"></span>
<br />
<span data-bind="click: addRed">Add Red</span>

JavaScript

function ViewModel() {
    var self = this;
    self.arrayOfObjects = ko.observableArray( [{type:'red' , value:1},{type:'blue' , value:'2'},{type:'red' , value:3},{type:'red' , value:4}]);
    
    self.count = ko.computed(function() {
        var redItems = ko.utils.arrayFilter(self.arrayOfObjects(), function(arrayItem) {
             return arrayItem.type == 'red';
        });
    
        return redItems.length;
    });
    
    self.addRed = function() {
        self.arrayOfObjects.push({type: 'red', value: 10});  
    };
}

ko.applyBindings(new ViewModel());