title: Problems with computed var after mapping and adding new elements to observableArray
body: <p>I am trying to create within knockout mapping some computed variables. The problem is when adding new elements to the children's children after the mapping, my computed variables don't update with new elements added to the observableArray</p>
  
  <p>Please could you help?</p>
  
  <p>Here is the code, also attached a jsFiddle</p>
  
  <p>Thanks</p>
  
  <p><a href="https://jsfiddle.net/r3pasftb/18/" rel="nofollow noreferrer">https://jsfiddle.net/r3pasftb/18/</a></p>
  
  <pre><code>var data = {id: 45, Name: "Whatever Name", 
  Stages: [{stageID: 1, StageName: "Stage1", Team: [{Name: "Team1", FeesAllocated: 500}, {Name: "Team2", FeesAllocated: 200}]}, {stageID: 1, StageName: "Stage1", Team: []}]};
  
  mappingTeam = function(options){
  var teamSelf = options != null ? options : this;
  teamSelf.Name = ko.observable(options != null ? options.Name : 0);
  teamSelf.FeesAllocated = ko.observable(options != null ? options.FeesAllocated : 0);
  return teamSelf;
  };
  
  mappingStages = function(options){
      var stageSelf = options != null ? options : this;
  
    stageSelf.StageID = ko.observable(options != null ? options.StageID : 0);
    stageSelf.StageName = ko.observable(options != null ? options.StageName : 0);
    stageSelf.Team = ko.observableArray(ko.utils.arrayMap(stageSelf.Team, mappingTeam ));
  
  
    stageSelf.Length = ko.computed(function(){
          return stageSelf.Team().length;
    });
  
    //I need this value to be updated, but do nothing with new elements created after the mapping
    stageSelf.TotalStageFees = ko.computed(function(){
          var total = 0;
  
        ko.utils.arrayForEach(stageSelf.Team(), function (team) {
                  total += team.FeesAllocated();
              });
              return total;
    });
  
    return stageSelf;
  };
  
  var mappingOptions = {
  
          create: function (options) {
              return new function () {
                  var self = options.data;
  
                 //Here map Stage Array
                  self.Stages = ko.observableArray(ko.utils.arrayMap(self.Stages, mappingStages ));
  
                  ko.mapping.fromJS(self, {}, this);
              };
          }
      };
  
      //Map my object with child and subchild
      var self = ko.mapping.fromJS(data, mappingOptions);
      console.log(self.Stages()[0].TotalStageFees())
      console.log(self.Stages()[0].Length())
  
      //Add new TeamMember to first Stage
      self.Stages()[0].Team.push(new mappingTeam({Name: "Team3", FeesAllocated: 50}));
  
      //As you see, non TotalStageFees or Lenght are updated
      console.log(self.Stages()[0].TotalStageFees())
      console.log(self.Stages()[0].Team())
      console.log(self.Stages()[0].Length())
  </code></pre>