edit typo in vue

index.vue

<template>
  <div class="text__container">
    <label for="text">put text:</label>
    <textarea
      id=""
      v-model="text"
      name="texts"
      cols="30"
      rows="10"
      style="border: 1px solid black"
      @input="correctIt"
    >
    </textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: null,
      correctedTest: null,
      corrections: {
        realy: 'really',
        wierd: 'weird',
      },
    }
  },
  methods: {
    correctIt() {
      const entries = Object.entries(this.corrections)
      entries.forEach((entry) => {
        if (this.text.includes(entry[0])) {
          this.text = this.text.replace(entry[0], entry[1])
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.text__container {
  background-color: red;
}
</style>