Resolve "Improve handling of projects shared with a group"

What does this MR do?

Provides better scoped viewability of various subgroups and direct/shared/archived projects of a given group.

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

The unforgivable amount of DOM manipulation I have to do since the Vue component is used in multiple places, yet is also placed inside of DOM elements that it needs to control but isn't under the normal scope within Vue.

Should some of these DOM manipulations be moved into group_tabs.js? In order to move the DOM manipulating code out of the Vue component? Does it really make a difference?

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Conform by the code review guidelines
  • Has been reviewed by a UX Designer
  • Has been reviewed by a Frontend maintainer
  • Has been reviewed by a Backend maintainer
• Conform by the merge request performance guides
• Conform by the style guides
• If you have multiple commits, please combine them into a few logically organized commits by squashing them
• Internationalization required/considered
• End-to-end tests pass (package-and-qa manual pipeline job)

What are the relevant issue numbers?

Closes #44005 (closed)