calling a function on a bound property change in aurelia

I have this viewmodel, and all the code works

@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);
  });
}

problem is when myGames as a new game, the view doesn't refresh 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>

how should I solve this problem?