Dashboard.vue

<template lang="html">
  <div class="">
    <navigation-drawer :gravatar="gravatar" @clicked="profileShow"/>
    <h1 align="center" v-if="profile">Profile</h1>
    <h1 align="center" v-else>Golf</h1>
  </div>

</template>


<script>
import decode from 'jwt-decode'
import gravatar from 'gravatar'
import UserService from '@/services/UserService'
import navigationDrawer from '@/components/navigationDrawer'

export default {
  data () {
    return {
      gravatar: '',
      profile: true
    }
  },
  methods: {
    profileShow (v) {
      console.log(v)
      this.profile = v
      // console.log(this.profile)
    }
  },
  async mounted () {
    const { token } = this.$store.state
    const payload = decode(token)
    const { userId } = payload
    const userData = (await UserService.getInfo(userId, token)).data
    this.$store.dispatch('setUser', userData)
    const { email } = this.$store.state.user.email
    const gravatarUrl = await gravatar.url(email, {protocol: 'https'})
    this.gravatar = `${gravatarUrl}?d=identicon`
    // console.log(this.gravatar)
  },
  components: {
    navigationDrawer
  }
}
</script>

<style scoped lang="css">
h1 {
  align: center;
}
</style>

navigationDrawer.vue

<template lang="html">
  <v-navigation-drawer permanent clipped fixed light app>
    <v-toolbar flat class="transparent">
      <v-list class="pa-0">
        <v-list-tile avatar>
          <v-list-tile-avatar>
            <img :src="gravatar" />
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>{{ $store.state.user.name }} {{ $store.state.user.lastname }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-toolbar>
    <v-list class="pt-0" dense>
      <v-divider></v-divider>
      <v-list-tile v-for="item in items" :key="item.title" @click="item.action">
        <v-list-tile-action>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { title: 'Profile', icon: 'account_box', action: this.goProfile },
        { title: 'Clubs de golf', icon: 'group_work', action: this.golfClub }
      ]
    }
  },
  props: [
    'gravatar'
  ],
  methods: {
    goProfile () {
      this.$emit('clicked', true)
    },
    golfClub () {
      this.$emit('clicked', false)
    }
  }
}
</script>

<style lang="css">
</style>