Acho que seria mais interessante mover todo o controle do tempo para o componente Cronometro
em vez de só a exibição do tempo. Aí o Form
apenas repassaria a chamada do iniciar/parar para o componente filho:
Cronômetro
<template>
<section>
<b>{{ elapsed }}</b>
</section>
</template>
<script>
export default {
name: "Timer",
data() {
return {
timeInSeconds: 0,
};
},
computed: {
elapsed() {
return (new Date(this.timeInSeconds * 1000).toISOString()).substring(11, 19);
},
},
methods: {
start() {
this.interval = this.interval || setInterval(() => this.timeInSeconds++, 1000);
},
stop() {
clearInterval(this.interval);
}
}
}
</script>
Form
<template>
<div class="box">
<div class="columns">
<!-- ... -->
<div class="column is-flex is-align-items-center is-justify-content-space-between">
<Timer ref="timer"/>
<button type="button" class="button" @click="start">
<span class="icon">
<i class="fas fa-play"></i>
</span>
<span>Start</span>
</button>
<button type="button" class="button" @click="stop">
<span class="icon">
<i class="fas fa-stop"></i>
</span>
<span>Stop</span>
</button>
</div>
</div>
</div>
</template>
<script>
import Timer from "./Timer.vue";
export default {
name: "Form",
components: {Timer},
methods: {
start() {
this.$refs.timer.start();
},
stop() {
this.$refs.timer.stop();
}
}
}
</script>