Emberjs watching for variable changes passed from parent component?

I have the following code on child component to listen to changes

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);
  })
});

The values mouse_x and mouse_y are set properly as i verified that from the view. I am passing that to this component from another component using

The basic goal being listening to changes on the variables passed through parent and process them. The issue being neither the computed nor the observer method is being invoked. Where am i going wrong with this ?

Note that both of them are components and one of them being a child component inside another. Any help is appreciated