title: Computing properties from nested objects in Ember.js
body: <p>I need to display the result of a method in my Ember.js handlebars template. From what I understand, I must use a computed property to do this. The issue I'm having is the property relies on a nested object which does not seem to trigger a change event when changed/set, as I'm only changing its internal structure. Here's short example of my situation:</p>
  
  <pre><code>App.Foo = Ember.Object.extend({
      prop: {
          fizz: {}
      },
  
      init: function() {
          var prop = this.get("prop");
          prop.fizz.buzz = "foobar";
          this.set("prop", prop); // This doesn't seem to fire a change event
      },
  
      handlebarsValue: function() {
          var prop = this.get("prop");
          // ...
          // compute this property from the properties of `prop`
          // ...
          return prop.fizz.buzz;
      }.property("prop")
  });
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;p&gt;handlebarsValue: {{model.handlebarsValue}}&lt;/p&gt;
  </code></pre>
  
  <p>Is there any way to force an update on the computed property? Is there a better way to do this? Am I misunderstanding the 'Ember way'?</p>