Ember data child model loses belongsTo relationship on browser refresh

I have these two models, post and comment. Each post may have multiple comments.

var Post = DS.Model.extend({
  text: DS.attr('string'),
  comments: DS.hasMany('comment'),
});

var Comment = DS.Model.extend({
  text: DS.attr('string'),
  post: DS.belongsTo('post')
});

And here is the comment route:

export default Route.extend(AuthRouteMixin, {
  model: function(params) {
    return this.store.find('comment', params.comment_id);
  }
});

Then there is this post route: /posts/2 and from there when I move to a comment route /comments/5 , the belongsTo association works fine, because the comment data has the post param set. But when I refresh the browser on that comment route, it loses the belongsTo relationship. So, when I try to update the comment it sends null to the server for the post param. How should I fill the belongsTo relationship in this case?

Here is the complete route map:

Router.map(function() {
  this.resource('posts', function() {
    this.route('new');
    this.route('edit', { path: ':post_id' });
  });
  this.resource('comments', function() {
    this.route('edit', { path: ':comment_id' });
  });
});

Thanks in advance :-)

---

Note: In my API, I am side-loading the comments with posts.