odbieranie wielu danych z API

Witam, mam taki kod w Laravelu

return response()->json([
            'status' => 'success',
            'data' => [
                'article' => $article,
                'category' => $category     
            ]
        ],200);

i później je odbieram

const state = {,
  article: []
}
const getters = {
  article: state => {
    return state.article
  }
}
const actions = {
  getArticle({commit}, id){
    axios(`article/view/${id}`)
      .then(result => commit('ARTICLE', result.data.data))
  }
}
const mutations = {
  ARTICLE(state, article){
    state.article = article
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

i teraz kiedy odwołuję się
{{article.article.title}} to dane są bez problemu wyświetlane
a kiedy chcę kategorię
{{article.category.name}} nie działa

Co robię źle?

Wgraj sobie https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd i sprawdź czy w ogóle w category cokolwiek masz.

Mam, jest nazwa kategorii, tak samo wyświetla to postman a kiedy próbuję się to tego odwołać na stronie nic się nie wyświetla.
Nie rozumiem też dlaczego konsola wyrzuca Cannot read property 'name' of undefined

No to najwyraźniej nie masz tam wcale klucza article.category - przeglądarka Cię przecież nie oszukuje.

Przy state.article = article dorzuć console.log(article); i pokaż, co zwraca.

nie wiem dlaczego article zwraca mi obiekt a category tablicę

No my niestety też nie wiemy - ciężko się czyta w myślach i prywatnym kodzie.

Ok, już wiem dlaczego :D

$article = Article::findOrFail($id); //zwraca obiekt
$category = Category::where('id', $id_category)->get(); //zwraca tablicę
//mogę to zamienić na 
$category = Category::find($id_category); //i wtedy zwróci mi obiekt. To działa

jednak jak zwrócić obiekt w Laravelu jeśli będę musiał użyć where()->get(); ?

where()->first() lub where()->get()->first() lub po prostu first('foo', 'bar')