Looping a new <q-item> with <q-popoup-edit> nested doesn't work in quasar framework - vue.js

Question

I have been searching for solution for my problem, but still not resolved :')..
Anyway, Thanks so much for the help, Masters :)
So,
I have a button for add new task with this code inside the q-item-section , but when I clicked it, it is not adding new item as a expected..
<q-btn
#click="addMore"
class="text-weight-bolder"
label="Add"
size="14px"
color="white"
flat
icon-right="mdi-plus-circle-outline"
/>
By clicking above button, it will shows a new item (by using following code below), which is needed to be filled by users
<q-item v-for="task in todoOthers2" :key="task">
<q-item-section avatar>
<div class="cursor-pointer size-16px">
{{ task.time }}
<q-popup-edit v-model="time" class="bg-grey-2 text-white" :cover="false" :offset="[0, 10]" v-slot="scope">
<q-input filled v-model="todoOthers2.time" mask="time" :rules="['time']">
<template v-slot:append>
<q-icon name="access_time" class="cursor-pointer text-primary">
<q-popup-proxy transition-show="scale" transition-hide="scale">
<q-time v-model="time">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-popup-edit>
</div>
</q-item-section>
<q-item-section no-wrap >
<div class="cursor-pointer text-weight-bolder" style="width: 100px">
{{task.activity}}
<q-popup-edit v-model="todoOthers2.activity" class="bg-grey-2 text-white" :cover="false" :offset="[0, 10]" v-slot="scope">
<q-input v-model="scope.value" dense autofocus counter #keyup.enter="scope.set">
<template v-slot:append>
<q-icon name="edit" />
</template>
</q-input>
</q-popup-edit>
</div>
</q-item-section>
<q-item-section top side>
<div class="text-grey-8 q-gutter-xs">
<q-btn size="12px" color="secondary" flat dense round icon="mdi-check-circle" />
<q-btn size="12px" color="negative" flat dense round icon="mdi-delete" />
</div>
</q-item-section>
</q-item>
Here is the setup()
setup() {
const todoOthers2 = ref({
activity:"Add Your Task Here",
time:"08:00"
function addMore(){
todoOthers2.value.push({
activity: "Add Your Task Here",
time:"08:00"
})
return {
todoOthers2,
addMore,
}
}