Feat: edit user profile vue avatar

What does this MR do and why?

• Part of #393769

Using Vue to implement the form section of editing profile:

• Add user_avatar for the avatar section including uploading/deleting avatar.
• Integrate user_avatar to the edit profile app.
• Add metadata to profiles_helper for rendering initializing the app.
• Update avatar_uploading tests when feature flag turned on.
• Add test cases for both edit_user_profile_app and user_avatar

/cc @prajnamas @qk44077907 @orozot @fenyuluoshang

Feat: edit user profile vue avatar

• Implement the avatar section with Vue.
• Update template with metadata for rendering.

Changelog: added

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Screencast

CleanShot_2023-06-14_at_15.30.27

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. In rails console enable the experiment fully

   Feature.enable(:edit_user_profile_vue)

2. Visit http://127.0.0.1:3000/-/profile
3. Click the Upload avatar button.
4. Click the delete Delete avatar button after the last step.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.