浏览器在遍历字符串数组以创建打字效果时陷入困境

我有一个vue组件，该组件给定一个字符串数组，使每个字符串都有打字效果，每个单词都一个字母一个字母地书写，删除并返回到下一个单词。

目前，由于我的浏览器无法加载脚本（可能会占用过多CPU？），因此我无法测试此方法是否有效，因此只能停止执行脚本。

这是我的Vue组件，具有所有相关逻辑。

<template>
<div style="color:red; font-size:30px; padding:100px;">{{ word }}</div>
</template>
<!--SCRIPTS-->
<script>
export default {
name: 'Typewritter',


props:
{
    words: { default:() => { return [ 'First word', 'Second word', 'Almost there', 'This is the last, start again' ] }, type:Array },
},


data(){
    return { word:'', loop:true}
},

mounted()
{
    console.log(this.$options.name+' component successfully mounted');
    this.startTypeWritter();

},


methods:
{
    startTypeWritter()
    {
        do
        {
            const self = this;

            //Reset word
            self.word = '';

            //Loop through words array
            for(let i=0;  i < self.words.length; i++)
            {
                //Start adding letter by letter
                for(let x=0; x < self.words[i].length; x++)
                {
                    setTimeout(function(){ self.word = self.word+self.words[i].charAt(x); }, 400*x);
                }
                //Start removing letter bu letter
                for(let y=self.words[i].length-1; y>=0; y--)
                {
                    setTimeout(function(){ self.word = setCharAt(self.word, y, ''); }, 400*y);
                }
            }
            self.loop = false;
        }
        while(this.loop == true)
    }
}


};
</script>
<!--STYLES-->
<style scoped>
@media only screen and (max-width: 1136px) 
{

}
</style>