Vue Js Highlight Text with Input Field

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Highlight Text with Input Field</h3>
        <label for="search">Search:</label>
        <input id="search" v-model="searchTerm" @keyup="highlightText">
        <div class="text-container" ref="textContainer">
            <p v-html="highlightedText"></p>
        </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac enim vel metus commodo ultricies. Fusce nec quam vel dolor aliquam facilisis vitae a magna. Nunc luctus vestibulum ligula, eu sollicitudin dolor commodo non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id ante eu enim eleifend posuere vel nec magna. Sed euismod lorem sit amet ipsum venenatis, at dapibus purus vehicula.",
                    searchTerm: "",
                    highlightColor: "#FFFF00"
                };
            },
            computed: {
                highlightedText() {
                    const regex = new RegExp(this.searchTerm, "gi");
                    return this.text.replace(regex, match => {
                        return `<span style="background-color: ${this.highlightColor};">${match}</span>`;
                    });
                }
            },
            methods: {
                highlightText() {
                    const textContainer = this.$refs.textContainer;
                    const highlightedText = textContainer.querySelector(".highlight");
                    if (highlightedText) {
                        highlightedText.outerHTML = highlightedText.innerHTML;
                    }
                    const regex = new RegExp(this.searchTerm, "gi");
                    textContainer.innerHTML = this.text.replace(regex, match => {
                        return `<span class="highlight" style="background-color: ${this.highlightColor};">${match}</span>`;
                    });
                }
            }
        });

</script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
            font-family: Arial, sans-serif;
        }

h3 {
            margin-bottom: 20px;
        }

label {
            font-weight: bold;
        }

#search {
            margin-bottom: 20px;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 200px;
        }

.text-container {
            margin-top: 20px;
            width: 80%;
        }

p {
            line-height: 1.5;
            font-size: 16px;
        }

.highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</body>
</html>