Refreshing dynamic child route in ember not working?

i have a child route the structure is as followed

this.route('bookings',function(){
      this.route('pm',function(){
        this.route('booking-details',{ path: ':invoice_type'});
      });
    });

where booking is parent route whose child route is pm whose child route is booking-details which is a dynamic route.

when i refresh the child route it went back to its parent route.

the url show localhost/bookings/pm/undefined instead of localhost/bookings/pm/:invoice_type

the routes are

1.booking route

import Ember from 'ember';

export default Ember.Route.extend({
    beforeModel(transition){
        if(transition.targerName === 'index.bookings.index'){
            this.transitionTo('index.bookings.pm');
        }
    }
});

2.pm route.

import Ember from 'ember';

export default Ember.Route.extend({
    model:function(params){
    <Some Code>
    }
});

3.booking-details route

import Ember from 'ember';

export default Ember.Route.extend({
});