Ember component doesn't display async data at first

Total Ember beginner here - this question might be obvious.

I have the route /bets with a component to display bets filtered by future dates. The route template also has a button to route /bets/new where the user can add new bets. Each bet has a hasMany relationship to User.

My problem is that my bets doesn't show up in the component even though I can see in Ember Inspector that the data is loaded. It does show up when I add a new bet through the form in /bets/new though.

My reasoning was that since the data is async, it doesn't load until I request it by pushing a new bet, but I can't get my head around it.

bets.hbs

 
    New bet
 

 
 

bets.js

import Ember from 'ember';

export default Ember.Route.extend({

  model () {
    return this.store.findRecord('user', this.get('session.currentUser.uid'));
  }

});

upcoming-bets.hbs

<h2>Upcoming bets:</h2>



<div class="bet">
    <h3> vs </h3>
    <p>
      <small></small>
    </p>
    <p>
      Bet type: 
    </p>
    <p>
      Bet: 
    </p>
    <p>
      Stake: 
    </p>
    <p>
      User: 
    </p>
    <button class="btn btn-danger" ></button>
</div>



<p>
  You don't have any upcoming bets. Maybe add one?
</p>

upcoming-bets.js

import Ember from 'ember';

export default Ember.Component.extend({

  upcomingBets: function() {

    var today = new Date();
    today.setHours(0,0,0,0);

    return this.get('bets').filter(function(bet){
      return bet.get('eventDate') > today;
    });
  }.property('bets.@each'),

  actions: {
    deleteBet: function(bet){
      bet.destroyRecord();
    }
  }

});

new.js

import Ember from 'ember';

export default Ember.Controller.extend({

  actions: {

    addBet() {
      var newBet = this.store.createRecord('bet', {
        created: new Date(),
        sport: this.get('selectedSport.name'),
        league: this.get('league'),
        homeTeam: this.get('homeTeam'),
        awayTeam: this.get('awayTeam'),
        type: this.get('type'),
        bet: this.get('bet'),
        stake: this.get('stake'),
        odds: this.get('odds'),
        eventDate: this.get('eventDate'),
      });

      // Save user as well as bet
      var user = this.get('user');
      user.get('bets').addObject(newBet);

      newBet.save().then(function(){
        return user.save();
      });
    }
  }

});

I appreciate any pointers. Thank you!