I managed to do that by creating a a new component for each entry https://codepen.io/azmvth/pen/PwwQWvj
const app = Vue.createApp({
data() {
return {
log: []
}
},
methods: {
add() {
const self = this
const n = window.btoa(String(Date.now()))
self.log.push(n)
const a = {
data() {
return {
started: 0,
passed: 0
}
},
created() {
const _self = this
_self.started = Date.now()
setInterval(()=>{
_self.passed = Math.floor((Date.now()-_self.started)/1000)
}, 1000)
},
template: `<div>Entry added {{passed}} ago!</div>`
}
app.component(n, a)
}
}
})
app.mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>
<div id="app">
<component v-for="l of log" :is="l"></component>
<div style="margin-top: 1rem"><i>Click the button to add a new entry </i><button @click="add()">+</button></div>
</div>