category chooser changes when category id prop changes

src/components/category_chooser.vue

@@ -1,8 +1,9 @@
 <script setup>
 	import { onMounted, ref, watch, } from 'vue'
 	const emit = defineEmits(['update'])
-	const props = defineProps(['categories'])
+	const props = defineProps(['categories', 'currentWorkingCategoryID'])
 	const instruments = ref([])
+	const currentWorkingCategoryID = ref(props.currentWorkingCategoryID)
 	const chosenInstrument = ref('clarinet')
 	for(let category of props.categories){
 		if(!instruments.value.includes(category.instrument)){
@@ -12,6 +13,11 @@
 	const handleSelection = (event)=>{
 		emit('update', event.target.value)
 	}
+	
+	watch(() => props.currentWorkingCategoryID, (newValue)=>{
+		const newCategory = props.categories.find(category => category.id == newValue)
+		chosenInstrument.value = newCategory.instrument
+	})
 </script>
 <template>
 	<select v-model="chosenInstrument">
@@ -19,8 +25,18 @@
 			{{instrument}}
 		</option>
 	</select>
-	<select @change="handleSelection" v-for="instrument in instruments" :key="instrument" v-show="instrument == chosenInstrument">
-		<option v-bind:value="category.id" v-for="category in props.categories" :key="category.id" v-show="category.instrument == instrument" :selected="category.instrument == instrument">
+	<select
+		@change="handleSelection"
+		v-for="instrument in instruments"
+		:key="instrument"
+		v-model="props.currentWorkingCategoryID"
+		v-show="instrument == chosenInstrument">
+			<option
+				v-bind:value="category.id"
+				v-for="category in props.categories"
+				:key="category.id"
+				v-show="category.instrument == instrument"
+				:selected="category.instrument == instrument">
 					{{category.category}}
 		</option>
 	</select>

src/components/show_category.vue

@@ -38,7 +38,11 @@
 
 <template>
 	<h2>Show Category</h2>
-	<CategoryChooser @update="loadCategory" v-if="categories.length > 0" :categories="categories" />
+	<CategoryChooser
+		@update="loadCategory" 
+		v-if="categories.length > 0" 
+		:currentWorkingCategoryID="props.currentWorkingCategoryID" 
+		:categories="categories" />
 	<table>
 		<thead>
 			<tr>