Because components do not have an asyncData method, you cannot directly fetch async data server side within a component. In order to get around this limitation you have two basic options:
- Make the API call in the
mounted hook and set data properties when loaded. Downside: Won't work for server side rendering.
- Make the API call in the
asyncData or fetch methods of the page component and pass the data as props to the sub components. Server rendering will work fine. Downside: the asyncData or fetch of the page might be less readable because it's loading the data for other components.
