The issue I am facing here is if the user fetched user is administrator as we as accountant the only the last MyAccountantMenu show but MyAdministratorMenu doesn't show and if the user is User and administrator then only the MyAdministratorMenu shows. So in short only the last component with true condition shows.

<template>
  <div style='width: 100%;'>
    <MyUserMenu v-if='user.isUser && user_active' />
    <MyAdministratorMenu v-if='user.isAdministrator && user_active' />
    <MyAccountantMenu    v-if='user.isAccountant && user_active' />
  </div>
</template>

<script>
  import MyUserMenu from 'views/user-menu.vue';
  import MyAdministratorMenu from 'views/administrator-menu.vue';
  import MyAccountantMenu from 'views/accountant-menu.vue';

  export default {
    components: {
      MyUserMenu,
      MyAdministratorMenu,
      MyAccountantMenu
    },
    data: function() {
      return {
        user: {
          isUser: false,
          isAdministrator: false,
          isAccountant: false
        },
        user_active: false
      }
    },
    created: function() {
      this.fetchUser();
    },
    methods: {
      fetchUser() {
        var that = this
        this.$axios.get('/user.json')
        .then(response => {
          that.user.isUser = response.data.isUser;
          that.user.isAdministrator = response.data.isAdministrator;
          that.user.isAccountant = response.data.isAccountant;
          that.user_active = true;
        })
      }
    }
  };
</script>