improve loader organization syntax with script setup

[Hebilicious]

In the organization section of the docs, we can see the following pattern :

<script lang="ts">
import { useProjectIssues } from '@/loaders/issues'
import { useProjectPullRequests } from '@/loaders/pull-requests'
export { useProjectIssues, useProjectPullRequests }
</script>

<script setup lang="ts">
const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

This is not the most ergonomic, so it would be neat if we could support this as well, and make it the default syntax :

<script setup lang="ts">
import { useProjectIssues } from '@/loaders/issues'
import { useProjectPullRequests } from '@/loaders/pull-requests'

const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

There might be multiple ways to make this work,ie it could be similar to vue-macros, where it would compile to the first snippet.

For people who like and use auto-import, that means that this would work too. :

<script setup lang="ts">
const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

Regarding non-page components, the more natural syntax of importing from a dedicated loader directory would work.

<script setup lang="ts">
import { useProjectIssues } from '@/loaders/issues'

const { data: issues } = useProjectIssues()
</script>

While this is hiding some of the complexity, it makes writing the code more natural.

What do you think ?