Automatically update component for changes in ember.js service (ember 2.12)

I have a service like this:

import Ember from 'ember';

export default Ember.Service.extend({
     total: '',

    setTotal(total) {
        this.set('total', total);
    },
    getTotal(){
        return this.get('total');
    }
});

and two components in difference routes.

when one component update the "total" property in service, I want to automatically update the new value to other component's .hbs file. what is the best way to do this?