Switch to v-safe-html in performance_bar_app.vue

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

 <script>
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 
 import { s__ } from '~/locale';
@@ -12,6 +13,9 @@ export default {
     DetailedMetric,
     RequestSelector,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     store: {
       type: Object,
@@ -128,6 +132,7 @@ export default {
       this.currentRequest = newRequestId;
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 <template>
@@ -143,7 +148,7 @@ export default {
           class="current-host"
           :class="{ canary: currentRequest.details.host.canary }"
         >
-          <span v-html="birdEmoji /* eslint-disable-line vue/no-v-html */"></span>
+          <span v-safe-html:[$options.safeHtmlConfig]="birdEmoji"></span>
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>