docs: add information on using loaders outside of page components

docs/data-loaders/index.md

@@ -44,7 +44,7 @@ app.mount('#app')
 
 There are different data loaders implementation, the most simple one is the [Basic Loader](./basic/) which always reruns data fetching. A more efficient one, is the [Colada Loader](./colada/) which uses [@pinia/colada](https://github.com/posva/pinia-colada) under the hood. In the following examples, we will be using the _basic loader_.
 
-Loaders are [composables](https://vuejs.org/guide/reusability/composables.html) defined through a `defineLoader` function like `defineBasicLoader` or `defineColadaLoader`. They are _used_ in the component `setup` to extract the needed information.
+Loaders are [composables](https://vuejs.org/guide/reusability/composables.html) defined through a `defineLoader` function like `defineBasicLoader` or `defineColadaLoader`. They are _used_ in the component `setup` to extract the needed information. While you can organize your loaders in separate files, each loader always has to be exported from the page component where it is used. For more information, check [Organizing Loaders](./organization.md/).
 
 To get started, _define_ and _export_ a loader from a page:
 

docs/data-loaders/organization.md

@@ -47,7 +47,7 @@ When using this pattern, remember to **export the loader** in all the page compo
 
 ## Usage outside of page components
 
-Until now, we have only seen loaders used in page components. However, one of the benefits of using loaders is that they can be **reused in many part of your application**, just like regular composables. This will not only eliminate code duplication but also ensure an optimal and performant data fetching by **deduplicating requests and sharing the data**.
+Until now, we have only seen loaders used in page components. However, one of the benefits of using loaders is that they can be **reused in many parts of your application**, just like regular composables. This will not only eliminate code duplication but also ensure an optimal and performant data fetching by **deduplicating requests and sharing the data**.
 
 To use a loader outside of a page component, you can simply **import it** and use it like any other composable, without the need to export it.
 
@@ -60,6 +60,8 @@ const { data: issues } = useProjectIssues()
 </script>
 ```
 
+Do note that when using a loader in a component that is **not** a page component, you will still need to **export the loader** from the page components where it is used. Only importing the loader in a regular component and then using that component inside a page component will have no effect, and the router will not reload the data when navigating to another page.
+
 ## Nested Routes
 
 When defining nested routes, you don't need to worry about exporting the loader in both the parent and the child components. This will be automatically optimized for you and the loader will be shared between the parent and the child components.