title: Emberjs watching for variable changes passed from parent component?
body: <p>I have the following code on child component to listen to changes</p>
  
  <pre><code>import Component from '@ember/component';
  import Ember from 'ember';
  
  export default Component.extend({
  
    coordinates: Ember.computed("mouse_x", "mouse_y", function () {
      let val = ` ${mouse_x},${mouse_y}`;
      console.log(val);
      return val;
    }),
  
    coords_change_observer: Ember.observer('coordinates', function () {
      console.log(this.coordinates);
    })
  });
  </code></pre>
  
  <blockquote>
    <p>The values <strong>mouse_x</strong> and <strong>mouse_y</strong> are set properly as i verified that from the view. I am passing that to this component from another component using</p>
  </blockquote>
  
  <pre><code>{{#application-properties mouse_x=mouse_x mouse_y=mouse_y}}
  {{/application-properties}}
  </code></pre>
  
  <p>The basic goal being listening to changes on the variables passed through parent and process them. The issue being neither the <code>computed</code> nor the <code>observer</code> method is being invoked. Where am i going wrong with this ?</p>
  
  <blockquote>
    <p>Note that both of them are components and one of them being a child component inside another. Any help is appreciated</p>
  </blockquote>