converting show category to script setup syntax

src/components/show_category.vue

@@ -1,44 +1,42 @@
-<script lang="ts">
+<script setup>
-	import axios from 'axios';
+	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
-	export default {
+
-		props: ['currentWorkingCategoryID'],
+	const props = defineProps(['currentWorkingCategoryID'])
-		data() {
+
-			return {
+	const categories = ref([])
-				categories:[],
+	const categorySessions = ref([])
-				categorySessions:[],
+	const practiceCategoryId = ref(0)
-				practice_category_id:0
+
-			}
+	const { currentWorkingCategoryID } = toRefs(props);
-		},
+	
-		methods: {
+	const change = async (event) => {
-			change(event){
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value)
-				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value).then((response)=>{
+		categorySessions.value = await response.json()
-					this.categorySessions = response.data;
+	}
-				})
+
-			},
+	const copy = (event) => {
-			copy(event){
+		navigator.clipboard.writeText(event.target.innerText)
-				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
-			}
-		}
 	}
+
+	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 = await response.json()
-		practiceStatus.value = data
 	}
 
 	onMounted(loadData)