Ember.js - Access query parameters in route dynamically

I am accessing the query parameters in the route using the below code:

export default Ember.Route.extend({
  afterModel: function(params, transition){
    this.set('clientId', transition.queryParams.clientId);
  },
  setupController: function(controller) {
    controller.set('clientId', this.get('clientId'));
  }
});

The reason I am not using a controller is because I am feeding this data straight in to a component and I am of the understanding that in newer versions of Ember controllers will be phased out.

This is currently working however if I change any of the properties in the URL it doesn't update in the app unless I refresh the page or exit the route and re-enter it.

How can I "re-run" the route afterModel and update the properties which are passed to the component?

If the only option is to use a controller then I can implement this until a better solution comes along.