javascript - 在aurelia的绑定属性更改上调用函数

我有这个viewmodel，并且所有代码都有效

@connectTo<State>({
  selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('games')),
  target: 'games',
})
@connectTo<State>({
  selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('myGames')),
  target: 'myGames',
})
@autoinject()
@customElement('games')
export default class Games {
  private static readonly ADD_TO_MYGAMES = 'addToMyGames';
  @bindable() games: Game[] = [];
  myGames: Game[] = [];

  constructor(
    private readonly store: Store<State>,
  ) {
    store.registerAction(Games.ADD_TO_MYGAMES, myGamesState);
  }

  available(game: Game): boolean {
    console.log("available", game);
    return !!this.myGames.find((i) => _.isEqual(i, game));
  }

  addGame(game: Game) {
    this.store.dispatch(Games.ADD_TO_MYGAMES, game);
  }
}

const myGamesState = async (current: State, game: Game) => {
  console.log(game);
  return produce(current, state => {
    state.domain.myGames.push(game);
  });
}

问题是当myGames作为新游戏时，视图不会刷新 available

<template bindable="games">
  <div class="columns">
    <ul class="column">
      <li repeat.for="game of games" class="level">
        <button class="button level-item is-fullwidth ${available(game) ? 'is-success' : ''}" click.delegate="addGame(game)"
          disabled.bind="available(game)">
          ${game.name}
        </button>
      </li>
    </ul>
  </div>
</template>

我应该如何解决这个问题？