using v-model on summary

src/App.vue

@@ -14,10 +14,6 @@
 	const instruments = ref([])
 	const categories = ref([])
 
-	const updateCurrentWorkingCategory = (summarizedCategory) =>{
-		currentWorkingCategory.value = categories.value.find(category => category.id === summarizedCategory.category_id)
-	}
-
 	const refreshPage = (session) => {
 		summaryRef.value.loadData()
 		statusRef.value.loadData()
@@ -46,7 +42,10 @@
 				:currentWorkingCategory="currentWorkingCategory"/>
 		</section>
 		<section id="summary">
-			<Summary ref="summaryRef" @update="updateCurrentWorkingCategory"/>
+			<Summary 
+				ref="summaryRef"
+				:categories="categories"
+				v-model="currentWorkingCategory" />
 		</section>
 		<section id="category">
 			<ShowCategory

src/components/summary.vue

@@ -1,18 +1,21 @@
 <script setup>
 	import { onMounted, ref, defineExpose } from 'vue'
+	const props = defineProps(['categories'])
+	const currentWorkingCategory = defineModel()
+
 	const emit = defineEmits(['update'])
 
-	const categories = ref([])
+	const summary = ref([])
 
 	const loadData = async () => {
 		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'summary')
-		categories.value = await response.json()
+		summary.value = await response.json()
 	}
 
 	onMounted(loadData)
 
-	const setWorkingCategory = (category) => {
-		emit('update', category)
+	const setWorkingCategory = (choice) => {
+		currentWorkingCategory.value = props.categories.find(category => category.id === choice.category_id)
 	}
 
 	defineExpose({loadData})
@@ -31,7 +34,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr v-for="category in categories" @click="setWorkingCategory(category)">
+			<tr v-for="category in summary" @click="setWorkingCategory(category)">
 				<td>{{category.category_id}}</td>
 				<td>{{category.category}}</td>
 				<td>{{category.chunks_practiced}}</td>