How to make a typing effect in vuejs - animation

Question

hello j try to make a Typing effect on vuejs here is my code.
i'm trying to call setTimeout but it's the effect i want.
template:
<template>
<div>
<span class="back" #click="goToMenu"> 戻る</span>
<div class="img-container" >
<img v-bind:src="getCharacter.headImage" class="responsive-image">
<div class="conversation">
<span class="name">{{getCharacter.name}}</span>
<p class="text typewriter-text"> {{outputText}}</p>
</div>
<button>Start</button>
</div>
<Counter ></Counter>
</div>
SCRIPT :
export default {
name: "Practice",
methods: {
outText() {
if (this.inc < this.text1.length) {
this.outputText += this.text1.charAt(this.inc);
this.inc ++;
setTimeout(this.outText() , 100000)
}
}
},
mounted() {
this.outText()
},
data() {
return {
text1 :'こんにちは。あなたの日本語聞かせてほしいな！まずは練習！',
outputText : '',
inc:0
}
}
}
css :
<style scoped>
.text {
background-color: #ababab;
padding: 4%;
border-radius: 0 14px 14px 14px;
margin: 0;
width: 85vw;
height: 10vh;
}

Answer 1

You should not be calling the outText method when you pass it as an argument to setTimeout, doing so will call the method immediately, instead you want to pass the method to setTimeout so it can be called later after the timeout has elapsed.
Incorrect:
setTimeout(this.outText(), 100000)
Correct:
setTimeout(this.outText, 100000)
Also 100000ms (100s) is too long of a delay to notice anything.