JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>

<div id="app">
  <div v-if="currentTask">
    <h4>{{ currentTask.problem }}</h4>
    <textarea
      v-model="userSolution"
      @input="startTask"
      @keypress.enter.prevent="checkUserSolution"
    ></textarea>
    <pre>{{ currentTask.solution }}</pre>
  </div>
  <p>{{ message }}</p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    tasks: [],
    currentTaskIndex: 0,
    userSolution: '',
    intervalId: null,
    timeLeft: null,
  }),
  computed: {
    currentTask() {
      return this.tasks[this.currentTaskIndex];
    },
    message() {
      return this.timeLeft !== null
        ? this.timeLeft
          ? `Осталось секунд: ${this.timeLeft}`
          : 'Задание провалено'
        : this.tasks.length && this.tasks.length === this.currentTaskIndex
          ? 'Задание выполнено'
          : '';
    },
  },
  methods: {
    startTask() {
      if (this.currentTask && !this.intervalId) {
        this.timeLeft = this.currentTask.solution.length;
        this.intervalId = setInterval(() => {
          if (!--this.timeLeft) {
            this.stopTask();
          }
        }, 1000);
      }
    },
    stopTask() {
      clearInterval(this.intervalId);
      this.intervalId = null;
      this.userSolution = '';
      this.timeLeft &&= null;
    },
    checkUserSolution() {
      if (this.userSolution === this.currentTask.solution) {
        this.stopTask();
        this.currentTaskIndex++;
      }
    },
    async getData() {
      this.tasks = (await axios.get(
        'https://api.baserow.io/api/database/rows/table/33679/?user_field_names=true',
        {
          headers: {
            Authorization: 'Token z2i3GStdf8cGFb4bdGl2pwDT8CfpnM9W',
          },
        },
      )).data.results;
    },
  },
  created() {
    this.getData();
  },
});