Ember.js set controller property form component

I have a custom component called {{search-box}}, now on every keyUp() event I get the input value using this.get('query') now in order to reload my model with this specific search query, I have setup my search controller like this:

import Ember from 'ember';

export default Ember.Controller.extend({

  queryParams: ['q'],
  q: null

});

and my router like this:

import Ember from 'ember';

export default Ember.Route.extend({

  queryParams: {
    q: { refreshModel: true }
  },

  model: function(params){
    // call store here
  }

});

everything works fine except setting the controller.q property from inside the component. I have tried using this.sendAction() from the component hoping to catch it inside the controller and set the property this way but was unsuccessful. Any ideas on how to make this work?