title: Knockout observableArray item property change doesn't update UI
body: <p>When I change a property to <code>observableArray</code> it does not update the UI</p>
  
  <p>See example below and in <strong><a href="http://jsfiddle.net/Pnfmz/3/" rel="nofollow">jsFiddle</a></strong>.</p>
  
  <p><strong>Clicking on header should update <code>sorting</code> property and show/hide appropriate <code>span</code></strong></p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>var baseModel = [{
      key: 'name',
      type: 'string'
  }, {
      key: 'surname',
      type: 'string'
  }, {
      key: 'age',
      type: 'integer'
  }]
  
  var data = [{
      name: "John",
      surname: "Smith",
      age: 12
  }, {
      name: "Peter",
      surname: "Klark",
      age: 3
  }, {
      name: "Steve",
      surname: "Heisenberg",
      age: 43
  }]
  
  var vm = function () {
      var counter = 1;
      var people = ko.observableArray(data);
      var keys = ko.observableArray([]);
      var init = function () {
          var tempArray = [];
          _.each(baseModel, function (item, key) {
              tempArray.push({
                  key: item.key,
                  type: item.type,
                  sorting: false,
                  direction: "asc"
              });
          });
          // Set first column to sort by default
          tempArray[0].sorting = true;
          // Add 
          keys(tempArray);
      };
  
      var peopleList = ko.computed(function () {
          return people.sort(function (l, r) {
              var sortKey = _.where(keys(), {
                  sorting: true
              }) || keys()[0];
              var result;
              if (typeof sortKey !== "undefined" &amp;&amp; sortKey.length &gt; 0) {
                  result = (sortKey[0].direction === 'asc') ?
                      l[sortKey[0].key] &gt; r[sortKey[0].key] ? 1 : -1 :
                  l[sortKey[0].key] &lt; r[sortKey[0].key] ? 1 : -1;
              } else {
                  result = l[0] &gt; r[0] ? 1 : -1;
              }
              return result;
          });
      });
  
      var addKey = function () {
          keys.push({
              key: "New Key No " + (counter++),
              type: 'string',
              sorting: false,
              direction: 'asc'
          });
      }
  
      var sortColumn = function (v) {
          if(v.sorting === true){
              v.direction = (v.direction === 'asc') ? 'desc' : 'asc';
          } else {
              _.each(keys(),function(item,key){
               keys()[key].sorting = false;
              })
              keys()[keys().indexOf(v)].sorting = true;
          }
          keys.valueHasMutated();
      }
  
      init();
      return {
          people: people,
          keys: keys,
          addKey: addKey,
          peopleList: peopleList,
          sort: sortColumn
      }
  }
  
  ko.applyBindings(new vm());
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr data-bind="foreach: keys"&gt;
              &lt;td data-bind="click: $root.sort"&gt;
                  &lt;span data-bind="text: $data.key"&gt;&lt;/span&gt;
                  &lt;span data-bind="visible: $data.sorting, text: 'sorting'"&gt;&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: peopleList"&gt;
          &lt;tr data-bind="foreach: $root.keys"&gt;
              &lt;td data-bind="text: $parent[$data.key] || 'no data'"&gt;1&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button data-bind="click: addKey"&gt;Add new key&lt;/button&gt;
  </code></pre>