adding in character detail stuff

frontend/src/vues/CharacterDetails.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container>
+    {{ character.characterName }}
+    {{ character.playerName }}
+    {{ character.role }}
+    {{ character.status }}
+  </v-container>
+</template>
+
+<style></style>
+
+<script setup lang="ts">
+import { onMounted, watch, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+const route = useRoute()
+
+const characterId = ref(route.params.characterId)
+const character = ref({})
+
+async function loadCharacterDetails() {
+  const characterResponse = await axios.get(`/api/character/${characterId.value}`)
+  const gameDetails = await axios.post("/api/game", {
+  })
+
+  console.log(characterResponse)
+
+  character.value = characterResponse.data
+}
+
+onMounted(async () => {
+  loadCharacterDetails()
+})
+</script>

frontend/src/vues/CharacterList.vue

@@ -46,7 +46,7 @@ import axios from 'axios'
 let page = 0
 let count = 10
 const characters = ref({})
-const pageCount = ref({})
+const pageCount = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/character', {

frontend/src/vues/GameList.vue

@@ -35,7 +35,7 @@ import axios from 'axios'
 let page = 1
 let count = 10
 const games = ref({})
-const pageCount = ref({})
+const pageCount = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/game', {