conditional rendering is not working in vuejs v-if - vue.js

Question

i have a span tag which is conditionally rendered using v-if in vuejs. if user is null then it should
not be rendered and if user is not null then only it should be rendered. now when a user logged in, it
is being displayed, upto here its working, but when user click on logout, then it should not rendered but still its rendering
My code snippet is below
<span class="user-options" id="user-opt" v-if="user">
<ul class="user-details">
<li style="background: #000000; color: white; text-align: center; line-height: 30px;">
Welcome {{ user.username }}
</li>
<li style="text-align: center; background: white; color: black; line-height: 30px;">
email {{ user.username }}
</li>
<li style="background: white; color: black; line-height: 30px;" v-if="user.verified">
verified
<span style="float: right; color: blue;">
<i class="fas fa-check-circle"></i>
</span>
</li>
<li style="line-height: 30px;" v-if="user.verified">
total post
<span style="float: right">
{{ user.totalPost }}
</span>
</li>
<li style="text-align: center; line-height: 30px;" v-on:click="logOut">
logout
</li>
</ul>
</span>
when user click logout still its showing untill i refresh the page its rendering some content of span tag

Answer 1

problem was v-if="user"
<span class="user-options" id="user-opt" v-if="user ">
instead of above i used this code and everything is resolved
<span class="user-options" id="user-opt" v-if="user != null">