Input + Vuex store

Salut à tous,

Sur mon front j'ai un component parents qui au chargement (mounted) fais un call async sur une API pour get des data. J'utilise certaines de ces data dans le parent mais je voudrais aussi en pousser dans un component enfant. Le soucis est que l'enfant est rendu avant la fin du call donc j'ai undefined dans le props que je passe.

Parent.js

<template lang="html">
  <div class="">
    <navigation-drawer :gravatar="gravatar" @clicked="profileShow" />
    <profile v-if="profile" :userData="user"/>
    <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
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  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.user = 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>

Child.js

<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="userData.lastname"/>
            </v-flex>
            <v-flex xs6 pl-1>
              <v-text-field
              label="Prénom"
              v-model="userData.name"/>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs6 pr-1>
              <v-text-field
              label="Email"
              v-model="userData.email"/>
            </v-flex>
            <v-flex xs6 pl-1>
              <v-text-field
              label="Téléphone"
              v-model="userData.tel"/>
            </v-flex>
          </v-layout>
          <v-flex xs12>
            <v-text-field
            label="Address"
            v-model="userData.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 {
  props: [
    'userData'
  ],
  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>

Le soucis est que j'ai bien mes data mais quand je change une valeur j'ai l'erreur :
Error: [vuex] Do not mutate vuex store state outside mutation handlers.

Et je n'arrive pas à m'en défaire !