Edit Items in array of object with VueJs

// provare ad aggiungere animazione input shape quando รจ in errore



const {
  createApp
} = Vue

createApp({
  data() {
    return {
      done: false,
      errorEmpty: false,
      errorMinChar: false,
      newTask: '',
      tasks: [{
          text: 'Creare pagina registrazione ',
          done: false
        },
        {
          text: 'Creare pagina accedi',
          done: true
        },
        {
          text: 'Fixare bug',
          done: false
        }
      ]
    }
  },
  methods: {
    addNew() {
      if (this.newTask == "") {
        this.errorEmpty = true
        this.errorMinChar = false
      } else if (this.newTask.length < 3) {
        this.errorMinChar = true
        this.errorEmpty = false

      } else {
        this.errorEmpty = false
        this.errorMinChar = false
        this.tasks.push({
          text: this.newTask,
          done: false
        })
      }
      this.newTask = ""
    },
    deleteTask(indice) {
      if (confirm('Sei sicuro di voler cancellare?')) {
        this.tasks.splice(indice, 1)
      }
    },
    doneFunc(indice) {
      this.tasks[indice].done = true;
    },
    unDoneFunc(indice) {
      this.tasks[indice].done = false;
    }
  },
  mounted() {

  }
}).mount("#app")
<i class="fa-solid fa-pen-to-square"></i>

Im practicising with VueJs and i would like to edit a tasks.text when i click on edit.button.

This is github pages of project : LINK and this is github repo : link

I found something on codepen but i can’t get it to work on my project.

This is codepen link https://codepen.io/nanadjei2/pen/Nwbgpq

Anyway this is what i need to make it work, can anyone explain how to do it ?

Thank you all.