El problema al que me enfrento aquí es si el usuario obtenido es administrador, ya que nosotros, como contadores, solo se muestra el último MyAccountantMenu pero MyAdministratorMenu no se muestra y si el usuario es Usuario y administrador, solo se muestra MyAdministratorMenu . En resumen, solo se muestra el último componente con la condición verdadera.

 <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>