this.$parent.$get('client') returns pre-initialised data

[chanafdo]

I am using the latest vue with vue-router.

I have some nested routes

'/:id': {
    component: Vue.extend(require('./components/clients/show.vue')),
    subRoutes: {
        '/details': {
            component: Vue.extend(require('./components/clients/details.vue')),
        },
        '/quotes': {
            component: Vue.extend(require('./components/clients/quotes.vue')),
        },

In show.vue component I set the client object with an API call

module.exports = {
    data: function () {
        return {
            client: {
                name: '',
                email: '',
            },
        }
    },
    ready: function() {
        this.$http.get('/api/clients/' + this.$route.params.id, function(response) {
            this.$set('client', response);
        });
    }
}

Then in details.vue I need to access the client object I set on show.vue

module.exports = {
    data: function () {
        return {
            client: {
                name: '',
                email: '',
            },
        }
    },
    ready: function() {
        console.log(this.$parent.$get('client'));
        this.$set('client', this.$parent.$get('client'));
    }
}

using this.$parent.$get('client') return the pre-initialised object not the one received from the api call.

I need to get the object I set using the API call