problem text not updating after vue 3 upgrade

I have a component that I'm trying to rewrite for vue 3, more specifically, using their new setup script so the code is a bit cleaner looking, here is what it looks like currently.

export default {
    name: "typeWriter",
    data: () => {
        return {
            typeValue: "",
            typeStatus: false,
            displayTextArray: ['Art', 'Science', 'Math', 'Everything'],
            typingSpeed: 70,
            erasingSpeed: 70,
            newTextDelay: 1000,
            displayTextArrayIndex: 0,
            charIndex: 0,
        };
    },
    created() {
        setTimeout(this.typeText, this.newTextDelay + 200);
    },
    methods: {
        typeText() {
            if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
                if (!this.typeStatus) {
                    this.typeStatus = true;
                }

                this.typeValue += this.displayTextArray[this.displayTextArrayIndex].charAt(this.charIndex);
                this.charIndex++;

                setTimeout(this.typeText, this.typingSpeed);
            } else {
                this.typeStatus = false;

                // stop the typing once we hit the last thing we wish to type.
                if (this.displayTextArrayIndex + 1 >= this.displayTextArray.length) {
                    return
                }

                setTimeout(this.eraseText, this.newTextDelay);
            }
        },
        eraseText() {
            if (this.charIndex > 0) {
                if (!this.typeStatus) {
                    this.typeStatus = true;
                }

                this.typeValue = this.displayTextArray[this.displayTextArrayIndex].substring(0, this.charIndex - 1);
                this.charIndex -= 1;

                setTimeout(this.eraseText, this.erasingSpeed);
            } else {
                this.typeStatus = false;
                this.displayTextArrayIndex++;

                setTimeout(this.typeText, this.typingSpeed + 1000);
            }
        },
    },
};

Here is the new vue 3 code using <script setup lang="ts">

let typeValue = ""
let typeStatus = false
let displayTextArray = ['Art', 'Science', 'Math', 'Everything']
let typingSpeed = 70
let erasingSpeed = 70
let newTextDelay = 1000
let displayTextArrayIndex = 0
let charIndex = 0

setTimeout(typeText, newTextDelay);

function typeText() {
    if (charIndex < displayTextArray[displayTextArrayIndex].length) {
        if (!typeStatus) {
            typeStatus = true;
        }

        typeValue += displayTextArray[displayTextArrayIndex].charAt(charIndex);
        charIndex++;

        setTimeout(typeText, typingSpeed);
    } else {
        typeStatus = false;

        // stop the typing once we hit the last thing we wish to type.
        if (displayTextArrayIndex + 1 >= displayTextArray.length) {
            return
        }

        setTimeout(eraseText, newTextDelay);
    }
}

function eraseText() {
    if (charIndex > 0) {
        if (!typeStatus) {
            typeStatus = true;
        }

        typeValue = displayTextArray[displayTextArrayIndex].substring(0, charIndex - 1);
        charIndex -= 1;

        setTimeout(eraseText, erasingSpeed);
    } else {
        typeStatus = false;
        displayTextArrayIndex++;

        setTimeout(typeText, typingSpeed + 1000);
    }
}

The problem I'm hitting is, the vue 2 code it'll correctly update a div with the value in typeValue, the new vue 3 code is not updating the div, I added a console.log and can see that the code is indeed firing and working, the div just isn't recognizing this change in typeValue and I'm completely lost on why that is.

I'm still new to vue 3, so maybe I missed something, but this looks right to me so I'm lost on why the div isn't updating like it used to.

Try to make your data reactive with ref:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { ref } = Vue
const app = Vue.createApp({
setup() {
let typeValue = ref("")
let typeStatus = false
let displayTextArray = ['Art', 'Science', 'Math', 'Everything']
let typingSpeed = 70
let erasingSpeed = 70
let newTextDelay = 1000
let displayTextArrayIndex = ref(0)
let charIndex = 0
setTimeout(typeText, newTextDelay);
function typeText() {
if (charIndex < displayTextArray[displayTextArrayIndex.value].length) {
if (!typeStatus) {
typeStatus = true;
}
typeValue.value += displayTextArray[displayTextArrayIndex.value].charAt(charIndex);
charIndex++;
setTimeout(typeText, typingSpeed);
} else {
typeStatus = false;
if (displayTextArrayIndex.value + 1 >= displayTextArray.length) {
return
}
setTimeout(eraseText, newTextDelay);
}
}
function eraseText() {
if (charIndex > 0) {
if (!typeStatus) {
typeStatus = true;
}
typeValue.value = displayTextArray[displayTextArrayIndex.value].substring(0, charIndex - 1);
charIndex -= 1;
setTimeout(eraseText, erasingSpeed);
} else {
typeStatus = false;
displayTextArrayIndex.value++;
setTimeout(typeText, typingSpeed + 1000);
}
}
return {
typeValue, eraseText, typeText
};
},
})
app.mount('#demo')

<!-- language: lang-html -->

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<input type="text" :value="typeValue" />
</div>

<!-- end snippet -->