[Vuejs]-V-if and v-else shows while page is loading?

This might be happening because of other errors in your code, like:

1. <img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />, you should use v-bind with src
2. class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}" You should be using dynamic class binding here.

See modified code:

<div class="center_image" v-if="avatarImageSet">
    <div class="checked">
        <div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
            <img :src="home_asset('img/very_big_user_icon.png')" alt="" />
        </div>
        <div class="check_profile business">
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>
<div class="center_image" v-else>
    <div class="checked">
        <div class="seller_image">
            <img v-bind:src="user_credentials.avatar" alt="Avatar"/>
        </div>
        <div class="check_profile business">
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>