I've been delving into vue.js to enhance my skills and encountered an interesting behavior that I can't quite figure out. The scenario involves incrementing and re-rendering a basic output like so:
<div id="app">
<h1> Seconds : {{ number }}</h1>
{{ update() }}
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
number: 1
},
methods: {
update() {
setInterval(() => {
this.number++
}, 1000)
}
}
})
</script>
Everything appears to be working fine, except for the fact that instead of simply incrementing by 1...2...3...4...5..., the output doubles, displaying as 1...2...4...8...16...32...
Even when changing
this.number++
to
this.number = this.number + 1
The doubling effect persists. What am I overlooking here? Is this a bug or an unexpected feature?