Implementação a mais

Pra ser sincero nao consegui resolver esse desafio, então fui ter que ver a resposta, e achei muito dificil pois vim do React, e ficou um pouco confuso pra mim passar props e tal, mas resolvi fazer algo a mais para fixar ainda mais o conteudo, passei uma props para o formulario para desativar o input ao apertar em play, não sei se é a melhor maneira de fazer mas eu fiz assim..

Componente Formulario:

<template>
    <div class="box">
        <div class="columns">
            <!-- 8 colunas.. -->
            <div class="column is-8" role="form" aria-label="Formulário para criação de uma nova tarefa">
                <input 
                    type="text" 
                    class="input" 
                    placeholder="Qual tarefa você deseja iniciar?"
                    v-model="descricao"
                    :disabled="desativarInput"
                >
            </div>
            <div class="column">
                <Temporizador @aoTemporizadorFinalizado="finalizarTarefa" @cronometroRodando="cronometroRodando"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Temporizador from './Temporizador.vue';

export default defineComponent({
    name: 'FormulárioC',
    components: {
        Temporizador
    },
    data () {
        return {
            descricao: '',
            desativarInput: false
        }
    },
    methods: {
        finalizarTarefa(tempoEmSegundos: number): void {
            console.log('Tempo da tarefa: ', tempoEmSegundos)
            console.log('Descrição da tarefa: ', this.descricao)
            this.descricao = ''
        },
        cronometroRodando(desativa: boolean): void {
            this.desativarInput = desativa
        }
    }
})
</script>

<style></style>

Componente Temporizador:

<template>
    <div class="is-flex is-align-items-center is-justify-content-space-between">
        <Cronometro :tempoEmSegundos="tempoEmSegundos" />
        <Botao @clicado="iniciar" icone="fa fa-play" texto="play" :desabilitado="cronometroRodando"/>
        <Botao @clicado="finalizar" icone="fas fa-stop" texto="stop" :desabilitado="!cronometroRodando"/>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Cronometro from './Cronometro.vue';
import Botao from './Botao.vue';

export default defineComponent({
    name: 'TemporizadorC',
    components:{
        Cronometro,
        Botao
    },
    emits: ['aoTemporizadorFinalizado', 'cronometroRodando'],
    data() {
        return{
            tempoEmSegundos: 0,
            cronometro: 0,
            cronometroRodando: false
        }
    },
    methods: {
        iniciar(){
            this.cronometro = setInterval(() => {
                this.tempoEmSegundos += 1
                this.cronometroRodando = true
                this.$emit('cronometroRodando', this.cronometroRodando)
            }, 1000)
        },
        finalizar(){
            this.cronometroRodando = false
            clearInterval(this.cronometro)
            this.$emit('aoTemporizadorFinalizado', this.tempoEmSegundos)
            this.$emit('cronometroRodando', this.cronometroRodando)
            this.tempoEmSegundos = 0
        }
    }
})
</script>