It seems like the issue may be that the initial value is set to null. Since data loading is asynchronous, you'll need to ensure that the data has finished loading before creating components that rely on it.
You have an isLoading flag in place, which appears to be an attempt to wait for the loading process to complete before displaying any components (possibly using a conditional rendering with v-if). However, currently, it only waits for the first request and not the second. So instead of:
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
}
);
this.isLoading = false;
You should do:
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
this.isLoading = false;
}
);
If the issue is not with the initial value being set to null, then you may need to investigate what is causing it to be set as such. You can easily debug this by adding a debugger statement in your setter function:
$clientConfiguration: {
get: function () { return globalData.$data.$clientConfiguration },
set: function (newConfiguration) {
if (!newConfiguration) {
debugger;
}
globalData.$data.$clientConfiguration = newConfiguration;
}
}
In addition to resolving the issue with null, if you're using Vue 2.6+, consider utilizing Vue.observable as a simpler method for creating reactive objects compared to creating a new Vue instance.
Personally, I would prefer implementing all of these changes by placing a reactive object on Vue.prototype instead of using a global mixin. This assumes that you actually require the object to be reactive; otherwise, the solution might be more complex than necessary.