title: Ember observer not working on nested property
body: <p>I have created a mock application to illustrate the situation I am facing: <a href="https://ember-twiddle.com/7315c32e07bc3d4f964c94e09d758a2c?openFiles=components.toggle-observer.js%2C" rel="nofollow noreferrer">Mock App</a></p>
  
  <p>In this application; I have created a service with a single boolean property and a function to toggle that property (<code>x</code>); and two components (one to toggle the service's property; the other to observe the number of toggles and display it). The observer lies in <code>toggle-observer</code>. It is added directly to service's property as: <code>myService.x</code>. The code is not working as is; however if the comment at line 14 of  <code>toggle-observer.js</code> is commented out; the observer starts working.</p>
  
  <p>My question is that, do I need to perform a <code>get</code> to the whole path of a nested observer property to get it working? Is this the expected behavior? If so, can somebody explain why? My best regards.</p>
  
  <p>Note: This is a mock example to illustrate the case; it is not related to anything I am designing in a real app. I am trying to avoid observers as much as possible; but I ran into this situation while trying out sth. and decided to ask it.</p>