display time as it changes. allow multiple timer starts and keep track of accumulated seconds

src/components/timer.vue

@@ -11,7 +11,8 @@
 				categories:[],
 				running: false,
 				startTime:0,
-				savedPreviousSeconds:0
+				savedPreviousSeconds:0,
+				totalSeconds:0
 			}
 		},
 		methods: {
@@ -25,13 +26,18 @@
 			start(event){
 				this.startTime = Date.now();
 				this.running = true;
+				this.intervalID = setInterval(()=>{
+					this.totalSeconds = getAccumulatedSeconds(Date.now(), this.startTime) + this.savedPreviousSeconds;
+				}, 1000);
 			},
 			stop(event){
 				this.running = false;
 				this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
+				clearInterval(this.intervalID);
 			},
 			reset(event){
 				this.savedPreviousSeconds = 0;
+				this.totalSeconds = 0;
 			}
 		},
 		mounted() {
@@ -47,13 +53,13 @@
 		<summary><h2>Timer</h2></summary>
 		<button :disabled="running" @click="start">Start Timer</button>
 		<button :disabled="!running" @click="stop">Stop Timer</button>
-		<button :disabled="running || savedPreviousSeconds === 0" @click="reset">Reset</button>
+		<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
 		<form @submit="submit">
 			<label>Description</label>
 			<input v-model="description" type="text"/>
 
 			<label>Seconds</label>
-			<input v-model="savedPreviousSeconds" type="number"/>
+			<input v-model="totalSeconds" type="number"/>
 
 			<label>Comments</label>
 			<textarea v-model="comments"/>