Getting rid of nested data objects in VueJS

Data Structure now - http://i.stack.imgur.com/sCh7h.png

This is data structure that I have and I think there are redutand things, it would be nice if I could keep just one parent object and then access to data.

In my actions.js I'm fetching data from specific API endpoint, and then store it in product object

export const getSingleProduct = ( {dispatch}, productName) => {
    productService.getSingleProduct(productName).then(result => {
        dispatch(types.GET_SINGLE_PRODUCT, { product: result.json() })
    })
} 

Then I have this in single.js store file, and then single object is nested under product

import { GET_SINGLE_PRODUCT, ADD_TO_BAG } from '../mutation-types'

const state = {
    single: []
}

const mutations = {
    [GET_SINGLE_PRODUCT] (state, product) {
        state.single = product
    }

}

export default {
    state,
    mutations
}

And at the end I have the getter into component, that stor data again into product object

vuex: {
    getters: {
        product: ({single}) => single,
        productName: ({route}) => route.params.productName
    },
    actions: {
        getSingleProduct,
        addToBag
    }
},

So as title say, is there a way to make this more simpler, to make it for e.g only like product>data not product>single>product>data ?

Thanks.