[Vuex] mapGetter vide

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Voila, je suis entrain de suivre le tutoriel Laravel - Partie 2 : VueJS. vers les 30min de la vidéo, Grafikart parle de mapGetters.
Il me semble suivre son tutoriel à la lettre (mais du coup je ne suis plus très sur).

Ce que je veux

Via la méthode ...mapGetters je veux obtenir la liste des utilisateurs à travers l'API.

{
    "2": {
            "name" : "John Doe 1",
            "id":2 },
    "3": {
            "name" : "John Doe 2",
            "id":3 },
    "4": {
            "name" : "John Doe 3",
            "id":4 },
    ...
}

Ce que j'obtiens

Sauf que j'obtiens une liste vide

{}

Mes codes

store.js

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

Vue.use(Vuex)

const get = async function (url) {
    let response = await fetch(url, {
        credentials: 'same-origin',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    if (response.ok) {
        return response.json()
    } else {
        let error = await response.json()
        throw new Error(error.message)
    }
}

/**
     * {
     *      1: {
     *          id: 1,
     *          name: 'John Doe 1',
     *          unread: 0,
     *          count: 100,
                messages: [{
                    id,
                    from_id,
                    to_id...
                }]
     *      }
     * }
     */
export default new Vuex.Store({
    strict: true,
    state: {
        conversations: {}
    },
    getters: {
        conversations: function(state) {
            return state.conversations
        }
    },
    mutations: {
        addMessages: function (state, {conversations}) {
            let obj = {}
            conversations.forEach(function (conversation) {
                obj[conversation.id] = conversation
            })
            state.conversations = obj
        }
    },
    actions: {
        loadConversations: async function (context) {
            let response = await get('/api/conversations')
            context.commit('addMessages', {conversations: response.conversations})
        }
    }
})

MessagerieComponent.vue

<template>
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                    <a class="list-group-item d-flex justify-content-between align-items-center">
                        John Doe {{ user }}
                        <span class="badge badge-pill badge-primary">0</span>
                    </a>
                {{ conversations }}
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
        props: {
            user: Number
        },
        computed: {
            ...mapGetters([
                'conversations'
            ])
        },
        mounted() {
            this.$store.dispatch('loadConversations')
        },
    }
</script>

Auriez-vous une idée ?

Merci par avance