Vue trigger click event after v-for has create a new dom - vue.js

Question

I use v-for to generate task tabs.
Tasks can be created by users, and after users have created a new task I want the UI changing to the newly created tab automatically.
i.e. After a new tab has been added to the dom tree, itself click event will be triggered and the callback function activateTask will execute.
<template>
<v-container>
<v-btn #click="createNewTask"></v-btn>
<v-tabs>
<v-tab v-for="task in tasks" :key="task.uuid" #click="activateTask">
{{ task.name }}
</v-tab>
</v-tabs>
</v-container>
</template>
<script>
export default {
data: {
tasks: [],
},
method: {
createNewTask() {
this.tasks.push({
uuid: util.generateUUID(),
name: "name",
});
},
},
};
</script>

Answer 1

You can bind v-tabs with v-model to control active-tab.
<template>
<v-container>
<v-btn #click="createNewTask"></v-btn>
<v-tabs v-model="currentTab">
<v-tab v-for="task in tasks" :key="task.uuid" #click="activateTask">
{{ task.name }}
</v-tab>
</v-tabs>
</v-container>
</template>
<script>
export default {
data: {
tasks: [],
currentTab: null
},
method: {
createNewTask() {
this.tasks.push({
uuid: util.generateUUID(),
name: "name",
});
this.currentTab = this.tasks.length-1
},
},
};
</script>

Answer 2

Figure out a way that using the update hook and a variable to check whether a new tab dom is created. If true select the last child node from dom tree and dispatch click event.
So ugly 😔.
updated() {
this.$nextTick(() => {
if (!this.newTaskCreated) {
return
}
this.$el.querySelectorAll('.task-tab:last-child')[0].dispatchEvent(new Event('click'))
this.newTaskCreated = false
})
}