title: Why does this observable become a computed / dependent when passed into component?
body: <p>I have a simple model, and on there is an observable ("model.thing"). I then set an additional observable on this ("someProp") and pass it into the params of a component.</p>
  
  <pre><code>model.thing = ko.observable({});
  model.thing.someProp = ko.observable("Yolo");
  </code></pre>
  
  <p>At this point the observable has become a computed and i'm not sure why.</p>
  
  <p>If i change the model so that instead of having <code>model.thing</code> as an observable i have it as a simple object and then pass that in, it is coming through without changing into a computed... </p>
  
  <p>Does anyone have an explanation for this behaviour?</p>
  
  <p>Here's a working example (it alerts the param which shows that it has become a computed).</p>
  
  <p><a href="http://liveweave.com/MozLiW" rel="nofollow">http://liveweave.com/MozLiW</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var viewModel = function() {
      var model = {};
   model.thing = ko.observable({}); //when thing is observable
     //model.thing = {};
   model.thing.someProp = ko.observable("Yolo");
   
      
    return model;
  };
  
  ko.components.register('custom-element', {
      viewModel: function(params) {
          this.value = params.value;
         alert(this.value); //then this is dependent, why?!
      }, 
      template:
      '&lt;div data-bind="text: value"&gt;&lt;/div&gt;'
  });
  
  ko.applyBindings(viewModel);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Knockout component&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;custom-element params="value: thing().someProp"&gt;&lt;/custom-element&gt;
  &lt;!--   
  &lt;custom-element params="value: thing.someProp"&gt;&lt;/custom-element&gt; --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>