Consolidate user avatar Vue logic

Creates 3 vue components:

1. user-avatar-link
2. user-avatar-image
3. user-avatar-svg

and implements them in several places.

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

• Port to EE
• Test each implementation manually

EE Compatible Branch: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1699

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

 <script>
 import defaultAvatarUrl from 'images/no_avatar.png';
 import UserAvatarSizeMixin from './user_avatar_size_mixin';
+import TooltipMixin from '../../mixins/tooltip.js;
 export default {
   name: 'UserAvatarImage',
-  mixins: [UserAvatarSizeMixin],
+  mixins: [UserAvatarSizeMixin, TooltipMixin],
   props: {
     imgSrc: {
       type: String,
@@ -37,11 +38,6 @@ export default {
       default: 'top',
     },
   },
-  watch: {
-    tooltipText() {
-      $(this.$refs.tooltipTarget).tooltip('destroy');
-    },
-  },
   computed: {
     tooltipClass() {
       return this.tooltipText ? 'has-tooltip' : '';
@@ -65,6 +61,6 @@ export default {
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
-    ref="tooltipTarget"
+    ref="tooltip"
   />
 </template>