Remove v-html from monitoring empty state

app/assets/javascripts/monitoring/components/charts/empty_chart.vue

 <script>
 import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { chartHeight } from '../../constants';
 
 export default {
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   data() {
     return {
       height: chartHeight,
@@ -18,14 +22,15 @@ export default {
   created() {
     this.chartEmptyStateIllustration = chartEmptyStateIllustration;
   },
+  safeHtmlConfig: { ADD_TAGS: ['use'] },
 };
 </script>
 <template>
   <div class="d-flex flex-column justify-content-center">
     <div
+      v-safe-html:[$options.safeHtmlConfig]="chartEmptyStateIllustration"
       class="gl-mt-3 svg-w-100 d-flex align-items-center"
       :style="svgContainerStyle"
-      v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */"
     ></div>
     <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5>
   </div>