Re-arrange <script> tags before <template> tags in .vue files

What does this MR do?

• Re-arrange <script> tags before <template> tags in .vue files
• Add docs to styleguide

Are there points in the code the reviewer needs to double check?

• Should we include the <style> example? There are few instances of this in the codebase even though we don't use it officially throughout.

Why was this MR needed?

• Inconsistent ordering of root elements in .vue files.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Review
  • Has been reviewed by Frontend
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together

What are the relevant issue numbers?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/38743