Vuejs showing evaluation v-if before data - vue.js

Question

Ok, the question is vague, but I have a code that looks like this:
<template>
<div>
<p v-if="users" v-for="user in users"> {{ user.name}} </p>
<p v-else> No users found</p>
</div>
</template>
<script>
export default {
data() {
return {
users: null
}
},
created() {
var that = this
axios.get('...').then(response => {
that.users = response.data
}).catch(error => { .... })
}
}
</script>
So, the actuall script has no issues, it loads the users and shows it properly. But, always I see the No users founds before vuejs loads the users. I don't want to see that messages, unless users is null but it seems vue doesn't wait for that to be true before showing the v-else.
Is there any proper way to handle this

Answer 1

Instead of using users for the if/else, use a loading property (you would probably need it anyway to present a loading state to the user):
<template>
<div>
<p v-if="!loading && users.length" v-for="user in users"> {{ user.name}} </p>
<p v-else> No users found</p>
</div>
</template>
<script>
export default {
data() {
return {
users: null,
loading: true
}
},
created() {
var that = this
axios.get('...').then(response => {
that.users = response.data
that.loading = false
}).catch(error => {that.loading = false .... })
}
}
</script>

Answer 2

I think this code is better:
<template>
<div>
<p v-for="user in users"> {{ user.name}} </p>
<p v-if="isLoaded && user.length === 0"> No users found</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoaded: false,
users: []
}
},
created() {
var that = this
axios.get('...').then(response => {
that.users = response.data
that.isLoaded = true
}).catch(error => { .... })
}
}
</script>