V-If and V-else questions (Vue and Firebase Real-time Database) - vue.js

Question

I'm working on a web application using Vue and Firebase-Real-time Database. I managed to include all the CRUD functions following several tutorials in Youtube. The problem right now is that i am unable to show or hide a certain element when changing the {Edit:} condition of the user via v-if/v-else. Below will be the code;
<template>
<div class="row">
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>ID</th>
<th>Actions</th>
</tr>
</thead>
<tbody v-for="userProfile in Users" :key="userProfile.key">
<tr v-if="userProfile.edit">
<td>{{userProfile.username}}</td>
<td>{{userProfile.email}}</td>
<td>{{userProfile.userId}}</td>
<td>
<button #click.prevent="updateUser(userProfile.key)" class="btn btn-primary"> Update </button>
<button #click.prevent="removeUser(userProfile.key)" class="btn btn-danger">Delete</button>
</td>
</tr>
<tr v-else>
<td> <input type="text" v-model="userProfile.username"> </td>
<td> <input type="text" v-model="userProfile.email"> </td>
<td> <input type="text" v-model="userProfile.userId"> </td>
<td>
<button #click.prevent="saveUser(userProfile)" class="btn btn-primary"> Save </button>
<button #click.prevent="cancel(userProfile.key)" class="btn btn-danger"> Cancel </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
As for my script
import { usersRef } from '../main.js';
export default {
data() {
return {
Users: [],
}
},
created() {
usersRef.once('value', (Users) => {
Users.forEach((doc) => {
this.Users.push({
key: doc.key,
email: doc.child('email').val(),
username: doc.child('username').val(),
userId: doc.child('userId').val(),
})
})
})
},
methods:{
removeUser: function(key) {
usersRef.child(key).remove()
.then(function() {
console.log("deleted Sucessfully");
alert("Sucessfully Deleted");
}).catch(function(error) {
console.log(error);
});
},
updateUser: function(key) {
usersRef.child(key).update({edit:false})
.then(function() {
console.log("update Sucessfully");
alert("Sucessfully Update");
}).catch(function(error) {
console.log(error);
});
},
cancel:function(key){
usersRef.child(key).update({edit:false})
},
saveUser:function(userProfile) {
const key = userProfile.key;
usersRef.child(key).set({username:userProfile.username,email:userProfile.email,userId:userProfile.userId,edit:true})
.then(function() {
console.log("Saved Sucessfully");
alert("Successfully Saved");
}).catch(function(error) {
console.log(error);
});
}
}
}
am i doing something wrong? thanks in advance!