title: Vuex nested objects
body: <p>I am working on a app in vue right now that has an object with a few nested objects. Right now in my school object in the user object I can display the school object, but when I try to get the name attribute of the school object I get undefined for the name attribute when it has a value.</p>
  
  <p>This is my state of the application:</p>
  
  <pre><code>{
   "user": {
    "user": {
     "name": "Test",
     "email": "test@test.edu",
     "avatar": "http://www.gravatar.com/avatar/xxxx=300",
     "city": null,
     "state": null,
     "zip": null,
     "address": null,
     "lat": null,
     "long": null,
     "school": {
      "id": 1,
      "about": null,
      "header": null,
      "name": "Test",
      "user_id": 1,
      "created_at": "2018-06-06 19:48:16",
      "updated_at": "2018-06-06 19:48:16"
     },
     "following": [],
     "followers": [],
     "social_networks": [{
      "id": 4,
      "user_id": 1,
      "social_network_id": 1,
      "network_url": "test.com/k",
      "created_at": "2018-06-06 23:11:09",
      "updated_at": "2018-06-06 23:15:19"
     }, {
      "id": 5,
      "user_id": 1,
      "social_network_id": 2,
      "network_url": "test.com/k",
      "created_at": "2018-06-06 23:15:19",
      "updated_at": "2018-06-06 23:15:19"
     }, {
      "id": 6,
      "user_id": 1,
      "social_network_id": 5,
      "network_url": "test.com/k",
      "created_at": "2018-06-06 23:16:15",
      "updated_at": "2018-06-06 23:16:15"
     }]
    }
   },
   "socialNetowrks": {
    "available_networks": [{
     "id": 1,
     "network_name": "Facebook",
     "created_at": null,
     "updated_at": null
    }, {
     "id": 2,
     "network_name": "Instagram",
     "created_at": null,
     "updated_at": null
    }, {
     "id": 5,
     "network_name": "Twitter",
     "created_at": null,
     "updated_at": null
    }]
   }
  }
  </code></pre>
  
  <p>Here are my getters</p>
  
  <pre><code>const getters = {
      name(state){
          return state.user.school.name
      }
  };
  
  const mutations = {
      FETCH_USER(state,user){
          state.user = user;
      }
  };
  
  const actions = {
      getUser: ({commit}) =&gt; {
          axios.get('/user').then(response =&gt; {
              commit('FETCH_USER', response.data);
          });
  
      }
  }
  </code></pre>
  
  <p>When I just return the school object I get the object </p>
  
  <pre><code>{
   "id": 1,
   "about": null,
   "header": null,
   "name": "Test",
   "user_id": 1,
   "created_at": "2018-06-06 19:48:16",
   "updated_at": "2018-06-06 19:48:16"
  }
  </code></pre>
  
  <p>But when I return state.user.school.name I get undefined.
  Does Vuex not work if you have nested objects?</p>