javascript – Crear un dowpdown con vuejs y coreui

Soy jr en frontend, quiero desarrollar un dropdown con vuejs y coreui, pero me esta quedando de sta forma:
introducir la descripción de la imagen aquí

Quiero que se vea los items pegado al nombre del usuario.
Dejo el componente:

<template>
  <CDropdown
    inNav
    class="c-header-nav-items category-user"
    placement="bottom-end"
    add-menu-classes="pt-0"
  >
    <template #toggler>
      <CHeaderNavLink>
        <button v-if="loggedUser && loggedUser.name && loggedUser.lastName" class="btn dropdown-toggle button-badge" type="button" >
          {{ loggedUser.name }} {{ loggedUser.lastName }} <span class="badge-light badge-category"> PREMIUM </span>
        </button>
        <CIcon v-else name="cil-user" />
      </CHeaderNavLink>
    </template>
    <CDropdownItem :to="{ name: 'account' }">
    Account settings
    </CDropdownItem>
    <CDropdownItem :to="{ name: 'profile' }">
      My profile
    </CDropdownItem>
    <CDropdownItem>
      Upgrade
    </CDropdownItem>
    <CDropdownDivider />
    <CDropdownItem @click="logout">
      Logout
    </CDropdownItem>
    <!-- <CDropdownDivider /> -->
    <!-- <CDropdownItem>
      Terms of service
    </CDropdownItem>
    <CDropdownItem>
      Privacy policy
    </CDropdownItem> -->

  </CDropdown>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'TheHeaderDropdownAccnt',
  data() {
    return {
      itemsCount: 42
    }
  },
  computed: {
    ...mapState('auth', ('loggedUser'))
  },
  methods: {
    ...mapMutations('auth', {
      userLogout: 'logout'
    }),
    logout() {
      this.userLogout()
      this.$router.push({ name: 'login' })
    }
  }
}
</script>

<style scoped>
.c-icon {
  margin-right: 0.3rem;
}
.badge-category {
 margin-left: 2%;
  padding: 1.5%;
}
.mt-x {
  margin-top: 1.5%
}
.category-user {
  margin-top: 9%;
  margin-right: 11em;

}
.button-badge {
  background: none;
  margin-bottom: 20px;
}

</style>