How does component observer change when the ember service variable changes

I have a service with a variable "players" which is an array. Whenever the service variable changes, i want to compute a variable in another component. I have used observer and computed property but the component observer is not getting called or changed.

**roster.js:**
export default Ember.Service.extend({
    players:{},
});


**component.js:**
export default Ember.Component.extend({
  positions:config.APP.POSITIONS.cricket,
  roster: Ember.inject.service(),
  newPlayers: Ember.computed('roster.players',function(){
    console.log("Am the computed value"); 
    //This return statment is just an example that i want to change the result object
    return "am in "+this.get('roster').players.length
  }),
});


**component.hbs**
<div class="listview">
  <div class="player-list-panel">
   Length: {{roster.players.length}}
   New Players: {{newPlayers}}
  </div>
</div> 
{{yield}}

for the first time when page loads the component then the the newPlayers is called. When the players object in the service gets updated then the newPlayers is not getting computed

Please help me in how to get it or the right approach.

Inside the component, to access service, you need to inject it. suppose service file name is my-service.js

myService: Ember.inject.service(),

newPlayers- is a computed property, You need to use it (ie, get it) somewhere in the code either in component js/hbs, only then this will be calculated otherwise it won't.