3👍
There are a couple of keys things to note here.
Firstly, when you log an object to the console it is live. You’ll probably see a little blue ‘i’ icon after you expand the object that explains this. What this means is that the object properties are not copied. Instead the console just has a reference to the object. It only grabs the property values when you click on the object in the console to expand it. You can work around this by logging out console.log(JSON.stringify(this.organization)) instead.
The second point to note is that it really doesn’t matter which hook you use to load the data. The hooks beforeCreate, created, beforeMount and mounted will all run synchronously at the relevant stages. Meanwhile, your data is being loaded asynchronously. Vue won’t wait for it, there’s no support for that. No matter which hook you use the data won’t be loaded until after the initial rendering/mounting is complete. This is a common problem and you just need to write your component in such a way that it can cope with the data being missing when it first renders.
To be clear, I’m not saying that the hooks are interchangeable in general. They most definitely aren’t. It’s just that when you’re loading data using an AJAX request it doesn’t make any real difference which you use. The AJAX request will always come back after all of those hooks have been run. So performing the request in an earlier hook won’t make the data available in the later hooks.
A common alternative is to load data in a parent component and only create the child once the data is loaded. That’s usually implemented using a v-if and the data is then passed using a prop. In that scenario the child doesn’t have to deal with the data being missing.