Structuring Composables

To keep your composables — those extracted functions written using the composition API — neat and easy to read, here's a way to organize the code.

1. Component and directives
2. provide and inject
3. defineProps, defineEmits, and defineExpose (when using script setup)
4. refs and reactive variables
5. Computed properties
6. Immediate watchers
7. Watchers
8. Lifecycle methods, in their correct order
9. Non-reactive state
10. Methods
11. Async code using await (or Promises if you're into that sort of thing)

Why this order? Because it more or less follows the order of execution of the code.

It's also based on the this linting rule.