Im working on a Vue project in which I use a JS package which I can use to check if a word is spelled correctly or not. I have a function that splits a text into individual words and then checks it using the package. The package then returns true or false.

Now I want to underline specific parts of the users input to indicate spelling mistakes.
How would I do that?

<script setup lang="ts">
import { ref, watch } from 'vue';
import Typo from "typo-js";


const inputField = ref('');
const wordsArray = ref<string[]>([]);
//let dictionary = new Typo("en_US", false, false, {dictionaryPath: "../typo/dictionaries/"});
const dictionary = new Typo("en_US");

function extractWords(text: string): string[] {
  const cleanText = text.replace(/[.,!?;:]/g, '').toLowerCase();
  const words = cleanText.split(/s+/);
  return words.filter(word => word.length > 0);
}


watch(inputField, (newValue) => {
  wordsArray.value = extractWords(newValue);
  console.log(wordsArray.value[wordsArray.value.length-1]);
  const is_spelled_correctly = dictionary.check(wordsArray.value[wordsArray.value.length-1]);
  console.log(is_spelled_correctly);
  const array_of_suggestions = dictionary.suggest(wordsArray.value[wordsArray.value.length - 1]);
  console.log(array_of_suggestions);

});
</script>

<template>
  <input type="text" v-model="inputField" />
  <div>
  </div>
</template>

<style scoped>

</style>

I’ve tried to return the wrong word as a html item but that didn’t seem to work either.