diff

src/App.vue

@@ -7,8 +7,8 @@
 	import Timer from './components/timer.vue'
 	import Status from './components/status.vue'
 	
-	const currentWorkingCategory = ref(null)
-	const currentWorkingInstrument = ref(null)
+	import { currentWorkingCategory, currentWorkingInstrument } from './libs/state.js'
+
 	const timerRunning = ref(false)
 	const micThresholdExceeded = ref(false)
 	const summaryRef = ref(null)
@@ -61,16 +61,14 @@
 				:categories="categories"
 				v-model:timerRunning="timerRunning"
 				v-model:micThresholdExceeded="micThresholdExceeded"
-				v-model:currentWorkingInstrument="currentWorkingInstrument"
-				v-model:currentWorkingCategory="currentWorkingCategory"/>
+				/>
 		</section>
 		<section id="summary">
 			<Summary 
 				ref="summaryRef"
 				:instruments="instruments"
 				:categories="categories"
-				v-model:currentWorkingInstrument="currentWorkingInstrument"
-				v-model:currentWorkingCategory="currentWorkingCategory"/>
+				/>
 		</section>
 		<section id="category">
 			<ShowCategory
@@ -78,8 +76,7 @@
 				ref="showCategoryRef"
 				:instruments="instruments"
 				:categories="categories"
-				v-model:currentWorkingInstrument="currentWorkingInstrument"
-				v-model:currentWorkingCategory="currentWorkingCategory"/>
+				/>
 		</section>
 		<section id="songs">
 			<Songs/>

src/components/category_chooser.vue

@@ -2,8 +2,7 @@
 	import { defineProps } from 'vue';
 
 	const props = defineProps(['instruments', 'categories'])
-	const currentWorkingCategory = defineModel('currentWorkingCategory')
-	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
+	import { currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
  	
 	const selectFirstInstrumentOfCategory = () => {
 		currentWorkingCategory.value = props.categories.find(category => category.instrument === currentWorkingInstrument.value.name)

src/components/show_category.vue

@@ -2,10 +2,9 @@
 	import { formatSeconds } from '../libs/time.js'
 	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps } from 'vue'
+	import { currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
 
 	const props = defineProps(['categories', 'instruments'])
-	const currentWorkingCategory = defineModel('currentWorkingCategory')
-	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 
 	const categorySessions = ref([])
 
@@ -27,8 +26,6 @@
 <template>
 	<h2>Show Category</h2>
 	<CategoryChooser
-		v-model:currentWorkingCategory="currentWorkingCategory"
-		v-model:currentWorkingInstrument="currentWorkingInstrument"
 		:instruments="props.instruments"
 		:categories="props.categories" />
 	<table>

src/components/summary.vue

@@ -1,8 +1,7 @@
 <script setup>
 	import { onMounted, ref, defineExpose } from 'vue'
+	import { currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
 	const props = defineProps(['instruments', 'categories'])
-	const currentWorkingCategory = defineModel('currentWorkingCategory')
-	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 
 	const summary = ref([])
 

src/components/timer.vue

@@ -3,8 +3,6 @@
 
 	const micThresholdExceeded = defineModel('micThresholdExceeded')
 	const timerRunning = defineModel('timerRunning')
-	const currentWorkingCategory = defineModel('currentWorkingCategory')
-	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 
 	const props = defineProps(['categories', 'instruments'])
 
@@ -27,7 +25,7 @@
 
 	import CategoryChooser from './category_chooser.vue'
 	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
-	import { copiedSongs } from '../libs/state.js'
+	import { copiedSongs, currentWorkingCategory, currentWorkingInstrument } from '../libs/state.js'
 
 	const description = ref('')
 
@@ -63,7 +61,7 @@
 				const reqBody = {
 					description:description.value,
 					seconds: this.totalSeconds,
-					practice_category_id: this.currentWorkingCategory.id
+					practice_category_id: currentWorkingCategory.value.id
 				}
 
 				if(reqBody.description && copiedSongs.value.length > 0){
@@ -193,7 +191,7 @@
 			},
 		},
 		mounted() {
-			this.practice_category_id = this.currentWorkingCategory.id
+			this.practice_category_id = currentWorkingCategory.value.id
 			if(window.localStorage.getItem('lastTotalSeconds')){
 				this.totalSeconds = parseInt(window.localStorage.getItem('lastTotalSeconds'))
 			} else {
@@ -231,8 +229,6 @@
 
 		<label>Practice Category</label>
 		<CategoryChooser
-			v-model:currentWorkingCategory="currentWorkingCategory"
-			v-model:currentWorkingInstrument="currentWorkingInstrument"
 			:instruments="instruments"
 			:categories="categories" />
 		<input type="submit"/>

src/libs/state.js

@@ -1,2 +1,4 @@
 import { ref } from 'vue'
 export const copiedSongs = ref([])
+export const currentWorkingCategory = ref(null)
+export const currentWorkingInstrument = ref(null)