Dashboard.vue

<template lang="html">
  <div class="">
    <navigation-drawer :gravatar="gravatar" @clicked="profileShow" />
    <profile v-if="profile"/>
    <golf-clubs v-else/>
  </div>
</template>

<script>
import decode from 'jwt-decode'
import gravatar from 'gravatar'
// import { mapState } from 'vuex'
import UserService from '@/services/UserService'
import NavigationDrawer from '@/components/NavigationDrawer'
import Profile from '@/components/Profile'
import GolfClubs from '@/components/GolfClubs'

export default {
  data () {
    return {
      gravatar: '',
      profile: true
    }
  },
  methods: {
    profileShow (v) {
      this.profile = v
    }
  },
  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)
    this.userData = userData
    const { email } = this.$store.state.user.email
    const gravatarUrl = await gravatar.url(email, {protocol: 'https'})
    this.gravatar = `${gravatarUrl}?d=identicon`
  },
  components: {
    NavigationDrawer,
    Profile,
    GolfClubs
  }
}
</script>

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

Profile.vue

<template lang="html">
  <v-container fluid fill-height>
    <v-layout row>
      <v-flex offset-xs2 xs10>
        <div class="form">
          <v-layout row>
            <v-flex xs6 pr-1>
              <v-text-field
              label="Nom"
              v-model="lastname"/>
            </v-flex>
            <v-flex xs6 pl-1>
              <v-text-field
              label="Prénom"
              v-model="name"/>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pr-1>
              <v-text-field
              label="Email"
              v-model="user.email"/>
            </v-flex>
            <v-flex xs6 pl-1>
              <v-text-field
              label="Téléphone"
              v-model="user.tel"/>
            </v-flex>
          </v-layout>
          <v-flex xs12>
            <v-text-field
            label="Address"
            v-model="user.address"/>
          </v-flex>
        </div>
        <v-btn
          dark
          class="cyan save"
          @click="updateUser">
          Modifier
        </v-btn>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import UserService from '@/services/UserService'

export default {
  computed: {
    user: {
      get () {
        return this.$store.state.user
      },
      set (value) {
        this.$store.commit('setUser', value)
      }
    }
  },
  methods: {
    async updateUser () {
      const { token } = this.$store.state
      try {
        const newUser = (await UserService.updateUser(this.userData._id, this.userData, token)).data
        this.$store.dispatch('setUser', newUser)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="css" scoped>
.content {
  padding: 64px 0px 36px 300px;
}

#save {
  align-items: center;
}

</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    token: null,
    user: {},
    isUserLoggedIn: false
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      if (token) {
        state.isUserLoggedIn = true
      } else {
        state.isUserLoggedIn = false
      }
    },
    setUser (state, user) {
      state.user = user
    }
  },
  actions: {
    setToken ({commit}, token) {
      commit('setToken', token)
    },
    setUser ({commit}, user) {
      commit('setUser', user)
    }
  }
})

So try this in profile.vue:

<script>
import UserService from '@/services/UserService'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      newUser: {
        email: '' // v-model all this stuff from the form
        name: '' // then pass it to the store action in the dispatch below.
      }
    }
  }
  computed: {
    // need to include the ... spread op below!
    ...mapGetters({
      user: 'user' // key is name of computed prop to use, value 'user' is the name of the getter from the store.
    })
  },
  methods: {
    updateUser () {
      this.$store.dispatch('setUser', this.newUser)
    }
  }
}
</script>

Then in the store something like:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    token: null,
    user: {},
    isUserLoggedIn: false
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      if (token) {
        state.isUserLoggedIn = true
      } else {
        state.isUserLoggedIn = false
      }
    },
    setUser (state, user) {
      state.user = user
    }
  },
  actions: {
    setToken ({commit}, token) {
      commit('setToken', token)
    },
    async setUser ({commit, store}, user) { // add store in here
      // now user is the object passed through from the 'newUser' obj in the child
        const { token } = store
        try {
          const newUser = (await UserService.updateUser(user._id, user.userData, token)).data
          commit('setUser', newUser)
        } catch (err) {
          console.log(err)
        }
      }
    }
  }
})