我有一个组件，我正试图重写vue 3，更具体地说，使用他们的新设置脚本，所以代码看起来有点干净，这是它目前的样子。

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);
            }
        },
    },
};

下面是使用<script setup lang="ts">的新vue 3代码

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);
    }
}

我遇到的问题是，vue 2代码将正确地用typeValue中的值更新div，新的vue 3代码是不更新div，我添加了一个console.log，可以看到代码确实在启动和工作，div只是没有识别typeValue中的这种变化，我完全不知道为什么。
我还是vue 3的新手，所以也许我错过了一些东西，但这对我来说是正确的，所以我不知道为什么div没有像以前那样更新。