converting show category to script setup syntax

src/components/show_category.vue

@@ -1,44 +1,42 @@
-<script lang="ts">
-	import axios from 'axios';
-	export default {
-		props: ['currentWorkingCategoryID'],
-		data() {
-			return {
-				categories:[],
-				categorySessions:[],
-				practice_category_id:0
-			}
-		},
-		methods: {
-			change(event){
-				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value).then((response)=>{
-					this.categorySessions = response.data;
-				})
-			},
-			copy(event){
-				navigator.clipboard.writeText(event.target.innerText);
-			}
-		},
-		mounted() {
-			this.practice_category_id = this.currentWorkingCategoryID
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
-				this.categories = response.data
-			})
-		},
-		watch: {
-			currentWorkingCategoryID(newValue){
-				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+newValue).then((response)=>{
-					this.categorySessions = response.data;
-				})
-				this.practice_category_id = newValue
-			}
-		}
+<script setup>
+	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
+
+	const props = defineProps(['currentWorkingCategoryID'])
+
+	const categories = ref([])
+	const categorySessions = ref([])
+	const practiceCategoryId = ref(0)
+
+	const { currentWorkingCategoryID } = toRefs(props);
+	
+	const change = async (event) => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value)
+		categorySessions.value = await response.json()
+	}
+
+	const copy = (event) => {
+		navigator.clipboard.writeText(event.target.innerText)
 	}
+
+	const loadCategory = async (newValue) => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+newValue)
+		categorySessions.value = await response.json()
+		practiceCategoryId.value = newValue
+	}
+
+	onMounted(async () => {
+		practiceCategoryId.value = currentWorkingCategoryID
+		loadCategory(currentWorkingCategoryID.value)
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories')
+		categories.value = await response.json()
+	})
+
+	watch(currentWorkingCategoryID, loadCategory)
 </script>
 
 <template>
 	<h2>Show Category</h2>
-	<select @change="change" v-model="practice_category_id">
+	<select @change="change" v-model="practiceCategoryId">
 		<option v-for="category in categories" v-bind:value="category.id">
 			{{category.instrument}}
 			:
@@ -72,6 +70,3 @@
 		</tbody>
 	</table>
 </template>
-
-<style scoped>
-</style>

src/components/status.vue

@@ -6,8 +6,7 @@
 
 	const loadData = async () => {
 		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'status')
-		let data = await response.json()
-		practiceStatus.value = data
+		practiceStatus.value = await response.json()
 	}
 
 	onMounted(loadData)