when timer runs, entire #timer section turns green, not just Timer component

src/App.vue

@@ -9,6 +9,8 @@
 	
 	const currentWorkingCategory = ref(null)
 	const currentWorkingInstrument = ref(null)
+	const timerRunning = ref(false)
+	const micThresholdExceeded = ref(false)
 	const summaryRef = ref(null)
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
@@ -34,13 +36,15 @@
 
 <template>
 	<main>
-		<section id="timer">
+		<section id="timer" :class="{timerRunning:timerRunning, micThresholdExceeded:micThresholdExceeded}">
 			<Status ref="statusRef"/>
 			<Timer 
 				v-if="currentWorkingInstrument"
 				@loggedTime="refreshPage"
 				:instruments="instruments"
 				:categories="categories"
+				v-model:timerRunning="timerRunning"
+				v-model:micThresholdExceeded="micThresholdExceeded"
 				v-model:currentWorkingInstrument="currentWorkingInstrument"
 				v-model:currentWorkingCategory="currentWorkingCategory"/>
 		</section>
@@ -66,3 +70,13 @@
 		</section>
 	</main>
 </template>
+
+<style scoped>
+.timerRunning {
+	background:lightgreen;
+}
+
+.timerRunning.micThresholdExceeded {
+	background:green;
+}
+</style>

src/components/timer.vue

@@ -1,5 +1,7 @@
 <script setup>
 	import { onMounted, getCurrentInstance } from 'vue'
+	const micThresholdExceeded = defineModel('micThresholdExceeded')
+	const timerRunning = defineModel('timerRunning')
 	const currentWorkingCategory = defineModel('currentWorkingCategory')
 	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 	const props = defineProps(['categories', 'instruments'])
@@ -25,7 +27,6 @@
 	export default {
 		data() {
 			return {
-				running: false,
 				startTime:0,
 				savedPreviousSeconds:0,
 				totalSeconds:0,
@@ -38,7 +39,6 @@
 				secondsToSubtract:0,
 				micThreshold:-1,
 				micLevel:0,
-				micThresholdExceeded:false,
 				practice_category_id:0
 			}
 		},
@@ -78,9 +78,9 @@
 
 			},
 			start(event){
-				if(this.running === false){
+				if(this.timerRunning === false){
 					this.startTime = Date.now();
-					this.running = true;
+					this.$emit('update:timerRunning', true)
 					this.intervalID = setInterval(()=>{
 
 						if(this.micThreshold > -1){
@@ -97,9 +97,9 @@
 						}
 
 						if(this.micLevel >= this.micThreshold){
-							this.micThresholdExceeded = true;
+							this.$emit('update:micThresholdExceeded', true)
 						} else {
-							this.micThresholdExceeded = false;
+							this.$emit('update:micThresholdExceeded', false)
 						}
 
 						this.totalSeconds = getAccumulatedSeconds(Date.now(), this.startTime) - this.secondsToSubtract + this.savedPreviousSeconds;
@@ -119,8 +119,8 @@
 				this.setManualTime(this.totalSeconds)
 			},
 			stop(event){
-				if(this.running === true){
-					this.running = false;
+				if(this.timerRunning === true){
+					this.$emit('update:timerRunning', false)
 					this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
 					clearInterval(this.intervalID);
 				}
@@ -191,15 +191,15 @@
 
 <template>
 	<h2>Timer</h2>
-	<div :class="{running:running, micThresholdExceeded:micThresholdExceeded}">
+	<div>
 		<em>
 			{{formatSeconds(totalSeconds)}}
 		</em>
 		Mic Threshold (current level: {{Math.round(micLevel)}}):
 		<input type="number" @change="activateMic" v-model="micThreshold"/>
-		<button :disabled="running" @click="start">Start</button>
-		<button :disabled="!running" @click="stop">Stop</button>
-		<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
+		<button :disabled="timerRunning" @click="start">Start</button>
+		<button :disabled="!timerRunning" @click="stop">Stop</button>
+		<button :disabled="timerRunning || totalSeconds === 0" @click="reset">Reset</button>
 	</div>
 	<form @submit="submit">
 		<label>Description</label>
@@ -237,14 +237,6 @@ input[type="number"] {
 	width: 5em;
 }
 
-.running {
-	background:lightgreen;
-}
-
-.running.micThresholdExceeded {
-	background:green;
-}
-
 button, em {
 	margin: 1em 0;
 	display:block;