title: Knockout component with observable object doesn't update data
body: <p>I have following component:</p>
  
  <pre><code>&lt;template id="fruits-tpl"&gt;
      &lt;p&gt;Name: &lt;input data-bind="value: name" /&gt;&lt;/p&gt;
      &lt;p&gt;Type: &lt;input data-bind="value: color" /&gt;&lt;/p&gt;
  &lt;/template&gt;
  
  
  ko.components.register('fruits', {
      viewModel: function(params) {
          this.name = params.name;
          this.color   = params.color;
      },
      template: { element: 'fruits-tpl' }
  });
  </code></pre>
  
  <p>I'm using this component together with the view model below, where the items in my observable list are of different types and have different properties:</p>
  
  <pre><code>function Fruit(data) {
      this.name = ko.observable(data.name);
      this.color = ko.observable(data.color);
  }
  function Dessert(data) {
      this.name = ko.observable(data.name);
      this.packaging = ko.observable(data.packaging);
  }
  function Vm(){
      var data = [{name:"Apples",color:"Yellow"},{name:"Cookies",packaging:"Box"}];
      this.items = ko.observableArray([new Fruit(data[0]),new Dessert(data[1])]);
      this.items.choice = ko.observable(this.items()[0]);
  }
  </code></pre>
  
  <p>This component works very well and the underlying data is updated every time i change the text in my input boxes:</p>
  
  <pre><code>&lt;div data-bind="component: {name: 'fruits', params: items.choice}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now, i would like to encapsulate the logic of my observables into the component itself, so i changed the component this way:</p>
  
  <pre><code>ko.components.register('fruits', {
      viewModel: function(params) {
          this.name = ko.observable(params.name);
          this.color   = ko.observable(params.color);
      },
      template: { element: 'fruits-tpl' }
  });
  </code></pre>
  
  <p>... and now i have my observable items.choice with just only data inside:</p>
  
  <pre><code>function Vm(){
      var data = [{name:"Apples",color:"Yellow"},{name:"Cookies",packaging:"Box"}];
      this.items = ko.observableArray(data);
      this.items.choice = ko.observable(this.items()[0]);
  }
  </code></pre>
  
  <p>Why goes the underlying data in the main viewmodel not updated in my second example, though items.choice is still observable? I'm sure i'm missing some concepts, maybe each item in my observable array should be also observable, but i don't have understand if there is a way to make the second example to work.</p>
  
  <p>First example: <a href="http://jsfiddle.net/5739ht0q/2/" rel="nofollow">http://jsfiddle.net/5739ht0q/2/</a>
  Second example: <a href="http://jsfiddle.net/079tx0nn/" rel="nofollow">http://jsfiddle.net/079tx0nn/</a></p>