# Service Property is Updated, Computed Property is Not

**URL:** <https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025>\
**Category:** Questions\
**Created:** [June 28, 2018, 12:01pm UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025 "2018-06-28T12:01:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mofungo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mofungo/32/14085_2.png) [@Mofungo](https://discuss.emberjs.com/u/Mofungo)\
**Post date:** [June 28, 2018, 12:01pm UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025/1 "2018-06-28T12:01:25Z")

</div>

I have a service where I change a prop ‘loggedIn’ from false to true. When I access the service’s prop through a computed property on my controller, I get the old value.  
When I access the prop directly from the service, I see the new value.

The computed property on the controller only runs once – at app start. Why isn’t this the computed prop updated when the value it references in the service is updated?

Anyone have any clues as to what I am missing? I’m running Ember 3.1.3

Service:

```auto
// services/session
export default Service.extend({
    loggedIn: false,
    login() {
        this.set('loggedIn', true);
    },
    isLoggedIn() {
        return this.get('loggedIn');
    }
});

```

Controler:

```auto
export default Controller.extend({
    session: computed(function() {
        return getOwner(this).lookup('service:session');
     }),

    isLoggedIn: computed('session', function() {
        console.log(" isLogggedIn"); // this is only called once (when app starts)
        let session = this.get('session');
        let isUserLoggedIn = session.isLoggedIn();
        return isUserLoggedIn;
    })
});

```

Route:

```auto
export default Route.extend({
    session: computed(function() {
       return getOwner(this).lookup('service:session');
    }),
    actions: {
       loginUser() {
           this.get('session').login();
       }
    }
});

```

Template:

```auto
<button class="button" {{action "loginUser"}}>Login</button>

{{!-- After user clicks "login" button, values are: --}}
<h2>{{isLoggedIn}}</h2> {{!-- false --}}
<h2>{{session.loggedIn}}</h2> {{!-- true --}}

```

---

<div class="post-metadata">

**Author:** ![heatbr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/heatbr/32/9874_2.png) [@heatbr](https://discuss.emberjs.com/u/heatbr)\
**Post date:** [June 28, 2018, 2:18pm UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025/2 "2018-06-28T14:18:56Z")

</div>

U need to observer the property not entire object. The object itself didn’t change.

```auto
computed('session.loggedIn', function() { ... })

```

---

<div class="post-metadata">

**Author:** ![Mofungo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mofungo/32/14085_2.png) [@Mofungo](https://discuss.emberjs.com/u/Mofungo)\
**Post date:** [June 28, 2018, 3:10pm UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025/3 "2018-06-28T15:10:50Z")

</div>

Got it. Thanks very much!

---

<div class="post-metadata">

**Author:** ![jelhan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jelhan/32/16917_2.png) [@jelhan](https://discuss.emberjs.com/u/jelhan)\
**Post date:** [June 28, 2018, 6:02pm UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025/4 "2018-06-28T18:02:46Z")

</div>

I would recommend to refactor your code. There is no need for a `isLoggedIn` method on your service if it only returns a property. Controller and Route should use [`inject()`](https://www.emberjs.com/api/ember/3.2/functions/@ember%2Fservice/inject) provided by `@ember/service` package. `isLoggedIn` of Controller should use [`readOnly()` macro](https://www.emberjs.com/api/ember/3.2/functions/@ember%2Fobject%2Fcomputed/readOnly) provided by `@ember/object/computed`.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [June 29, 2018, 3:39am UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025/5 "2018-06-29T03:39:00Z")

</div>

Yes, using @jelhan’s suggestions it would look like this:

```auto
import { inject } from '@ember/service';
import { readOnly } from '@ember/object/computed' 
export default Controller.extend({
    session: inject(),
    isLoggedIn: readOnly('session.loggedIn')
});

```

---

<div class="post-metadata">

**Author:** ![Mofungo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mofungo/32/14085_2.png) [@Mofungo](https://discuss.emberjs.com/u/Mofungo)\
**Post date:** [June 29, 2018, 3:31pm UTC](https://discuss.emberjs.com/t/service-property-is-updated-computed-property-is-not/15025/6 "2018-06-29T15:31:55Z")

</div>

Thanks very much for the replies @heatbr @jelhan @ef4 I appreciate you helping a n00b get going with this stuff!