switching to emit for clicking on summary category

src/App.vue

@@ -1,23 +1,17 @@
-<script setup lang="ts">
+<script setup>
+	import { ref } from 'vue'
+
 	import Summary from './components/summary.vue'
 	import ShowCategory from './components/show_category.vue'
 	import Songs from './components/songs.vue'
 	import Timer from './components/timer.vue'
 	import Status from './components/status.vue'
-</script>
-<script lang="ts">
-	export default {
-		data() {
-			return {
-				currentWorkingCategoryID:1
-			}
-		},
-		methods: {
-			setWorkingCategory(category){
-				this.currentWorkingCategoryID = category.category_id
-			}
-		}
+	
+	const currentWorkingCategoryID = ref(1)
+	const updateCurrentWorkingCategoryID = (id) =>{
+		currentWorkingCategoryID.value = id
 	}
+	
 </script>
 
 <template>
@@ -27,7 +21,7 @@
 			<Timer :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="summary">
-			<Summary :setWorkingCategory="setWorkingCategory"/>
+			<Summary @update="updateCurrentWorkingCategoryID"/>
 		</section>
 		<section id="category">
 			<ShowCategory :currentWorkingCategoryID="currentWorkingCategoryID"/>
@@ -37,6 +31,3 @@
 		</section>
 	</main>
 </template>
-
-<style scoped>
-</style>

src/components/status.vue

@@ -2,12 +2,14 @@
 	import { formatSeconds } from '../libs/time.js'
 	import { onMounted, ref } from 'vue'
 
-	let practiceStatus = ref({})
+	const practiceStatus = ref({})
+
 	const loadData = async () => {
 		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'status')
 		let data = await response.json()
 		practiceStatus.value = data
 	}
+
 	onMounted(loadData)
 </script>
 <template>

src/components/summary.vue

@@ -1,30 +1,23 @@
-<script lang="ts">
-	import axios from 'axios';
+<script setup>
+	import { onMounted, ref } from 'vue'
+	const emit = defineEmits(['update'])
 
-	export default {
-		props: ['setWorkingCategory'],
-		data() {
-			return {
-				categories:[]
-			}
-		},
-		methods: {
-			refresh(){
-				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'summary').then((response)=>{
-					this.categories = response.data
-				})
-			}
-		},
-		mounted() {
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'summary').then((response)=>{
-				this.categories = response.data
-			})
-		}
+	const categories = ref([])
+
+	const loadData = async () => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'summary')
+		categories.value = await response.json()
+	}
+
+	onMounted(loadData)
+
+	const setWorkingCategory = (category) => {
+		emit('update', category.category_id)
 	}
 </script>
 
 <template>
-	<h2 @click="refresh">Summary</h2>
+	<h2 @click="loadData">Summary</h2>
 	<table>
 		<thead>
 			<tr>
@@ -46,6 +39,3 @@
 		</tbody>
 	</table>
 </template>
-
-<style scoped>
-</style>