Vue-JS: how to change views based on user type?

Question

Vue.js

There is a page. It has a panel on it. It is necessary for each type of user: guest, logged in, admin to show different links on it. I can't figure out if I think it's right that I'm trying to do this:

var userMenu = Vue.component("usermenu", Vue.extend({
    template: "#usermenu",
    components: {
     guestView: Vue.extend({
        template: `
              <p>Quest</p>
            `}),

      userView: Vue.extend({
        template: `
                <p>User</p>
            `}),     

      adminView: Vue.extend({
        template: `
                <p>Admin</p>
            `})

    }

Vue.component('usermenu', userMenu)

How to switch components correctly in vue-js? To display another? How to transfer the state to them? Should I do some kind of global variable or what?

Answer 1

<component :is="view"></component>
respectively change the view parameter depending on the state of the user