title: EmberJS, how to observe changes in any object of a hash
body: <p>I have an Object like:</p>
  
  <pre><code>// app/services/my-service.js
  import Ember from 'ember';
  
  export default Ember.Service.extend({
    counters: Ember.Object.create()
  })
  </code></pre>
  
  <p><code>myService.counters</code> is a <em>hash</em> like:</p>
  
  <pre><code>{
    clocks: 3,
    diamons: 2
  }
  </code></pre>
  
  <p>I want to add a <em>computed attribute</em> to this object such returns the sum of <code>myService.counters.clocks</code> plus <code>myService.counters.diamons</code> </p>
  
  <pre><code>// app/services/my-service.js
  ...
  count: Ember.computed('counters.@each', function(){
    return _.reduce(this.get('counters'), function(memo, num){ return memo + num; }, 0);
  })
  ...
  </code></pre>
  
  <p>But the observer configuration is not accepted and I have the error:</p>
  
  <pre><code>Uncaught Error: Assertion Failed: Depending on arrays using a dependent key ending with `@each` is no longer supported. Please refactor from `Ember.computed('counters.@each', function() {});` to `Ember.computed('counters.[]', function() {})`.
  </code></pre>
  
  <p>But if I make the proposed change:</p>
  
  <pre><code>// app/services/my-service.js
  ...
  count: Ember.computed('counters.[]', function(){
    return _.reduce(this.get('counters'), function(memo, num){ return memo + num; }, 0);
  })
  ...
  </code></pre>
  
  <p>The <em>count</em> attribute is not updated.</p>
  
  <p>The only way I can make it work is like this:</p>
  
  <pre><code>// app/services/my-service.js
  ...
  count: Ember.computed('counters.clocks', 'counters.diamons', function(){
    return _.reduce(this.get('counters'), function(memo, num){ return memo + num; }, 0);
  })
  ...
  </code></pre>
  
  <p>How can I use any kind of wildcard for this situation?</p>