vue async function returns [object promise]

UPDATE

CodeSandbox

What i try to do:

i am working on a permissionerMixin which should handle a websites permission for authenticated users. for example if a logged in user has no permission to see a specific part of the website i handle the components with a v-if="allowedToSee". So far so good. i store the whole user permission object in my vuex store.

the data came from a rest api and looks like this:

const rights = [
  {
    name: 'findMe1',
    value: false,
  },
  {
    name: 'findMe2',
    value: false,
  },
  {
    name: 'findMe3',
    value: false,
  },
  {
    name: 'findMe4',
    value: false,
  }
]

now back to my mixin and and how i load the data from the api:

import axios from 'axios';
export const permissionerMixin = {
  methods: {
    async getRightsFromActiveUser() {
      axios.get(`/not/the/real/path/${this.$store.state.User.activeUser.id}`)
        .then((response) => {
          return this.$store.commit('addActiveUserRights', response.data);
        })
        .catch((error) => {
          console.log(error.response);
        });
    },
    async permissionFor(rightName) {
      const rights = await this.getRightsFromActiveUser();
      for (const right of rights) {
        if (right.name == rightName) {
          return right.value;
        }
      }
    }
  }
}

as u can see i have two functions which work together. getRightsFromActiveUser() is simply a getter for the right object i mentioned at the beginning. it takes the actual data and puts it in the vuex store with a mutation:

const state = {
  activeUser: {
    id: 0,
    permissions: {}
  }
};
const getters = {};
const actions = {};
const mutations = {
  addActiveUserId (state, id) {
    state.activeUser.id = id;
  },
  addActiveUserRights (state, rights) {
    state.activeUser.permissions = rights;
  }
};
export default {
  state,
  getters,
  actions,
  mutations,
};

right after this we have the actual init function permissionFor(rightName) which should do the magic and should give me a boolean return value to handle the permissionings.

the one big problem now is that i instead of getting a boolean return, i get a [object Promise], thats because i am stupid and i don't get that promise thing in my head.

at the end i simply want to add this function to a vue component with an

v-if="permissionFor('whatEver')" to solve the permission handling.