swap over to using watch for processing loaded games

frontend/src/vues/CharacterDetails.vue

@@ -8,9 +8,9 @@
       Games Played: {{ gamesPlayedCount }} --- Games Applied: {{ gamesAppliedCount }} -- Pick Rate:
       {{ pickRate.toFixed(2) }}%
     </div>
-    <div>Last Game: {{ new Date(gamesPlayed[gamesPlayed.length - 1].postdate * 1000).toISOString().split('T')[0]}}</div>
-    <GameTable title="Games Played" :gameList="gamesPlayed"></GameTable>
-    <game-table title="Games Applied" :gameList="gamesApplied"></game-table>
+    <!-- <div>Last Game: {{ new Date(gamesPlayed[gamesPlayed.length - 1].postdate * 1000).toISOString().split('T')[0]}}</div> -->
+    <GameTable title="Games Played" :gameList="games.played"></GameTable>
+    <game-table title="Games Applied" :gameList="games.applied"></game-table>
   </v-container>
 </template>
 
@@ -26,8 +26,7 @@ const route = useRoute()
 
 const characterId = ref(route.params.characterId)
 const character = ref({})
-const gamesPlayed = ref({})
-const gamesApplied = ref({})
+const games = ref({})
 const earnedEB = ref(0)
 const earnedIP = ref(0)
 const gamesPlayedCount = ref(0)
@@ -42,14 +41,10 @@ async function loadCharacterDetails() {
   console.log(gameDetails)
 
   character.value = characterResponse.data
-  gamesPlayed.value = gameDetails.data.characterPickedForGame
-  gamesApplied.value = gameDetails.data.characterAppliedForGame
-
-  calculateDerivedEarnings(gameDetails.data.characterPickedForGame)
-  calculateDerivedGameStats(
-    gameDetails.data.characterPickedForGame,
-    gameDetails.data.characterAppliedForGame
-  )
+  games.value = {
+    played: gameDetails.data.characterPickedForGame,
+    applied: gameDetails.data.characterAppliedForGame
+  }
 }
 
 function calculateDerivedEarnings(gamesPlayedList) {
@@ -69,6 +64,11 @@ function calculateDerivedGameStats(gamesPlayedList, gamesAppliedList) {
   pickRate.value = (gamesPlayedList.length / gamesAppliedList.length) * 100
 }
 
+watch(games, (newValue, oldValue) => {
+  calculateDerivedEarnings(newValue.played)
+  calculateDerivedGameStats(newValue.played, newValue.applied)
+})
+
 onMounted(async () => {
   loadCharacterDetails()
 })