title: Vuex: Return getter in mounted hook
body: <p>In my <strong>App.vue</strong> I am dispatching a Vuex action to retrieve a <code>user</code> from my API and also the <code>role</code> of the user like this:</p>
  
  <pre><code>async mounted() {
      const userToken = localStorage.getItem('token');
      await this.getUserRole(userToken);
      await this.getUserImage(userToken);
    },
  </code></pre>
  
  <p>I wrote a getter that only returns me the current role that is saved in the user object like this <code>getRole: state =&gt; state.user_role.role</code></p>
  
  <p>What I want to do is, that I want to dispatch an action regarding the user role in another view (Projects.vue):</p>
  
  <pre><code>async mounted() {
      console.log(this.$store.getters['user/getRole']);
      console.log(this.userRole);
  
      if (this.userRole === 'user') {
        // do things ...
      }
  }
  computed: {
      ...mapGetters('user', {
        user: 'getUser',
        userRole: 'getRole',
      })
  }
  </code></pre>
  
  <p>The problem here is that at the first page load/refresh I get <code>undefined</code> back from my getter. Only if I switch the route and come back, it returnes me in this case <code>user</code> instead of <code>undefined</code>.</p>
  
  <p>I mean I could dispatch the <code>user/getUserRole</code> action again in my Project.vue but I guess that would be bad as I have multiple calls for the same store/action.</p>
  
  <p>I also tried to work with <code>$nextTick()</code> in my <code>mounted()</code> but this did also not help.</p>