1 files changed, 5 insertions, 3 deletions
diff --git a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue
index e47bea8e589..587efd6ed41 100644
--- a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue
+++ b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlAlert } from '@gitlab/ui';
+import { GlButton, GlAlert, GlModalDirective } from '@gitlab/ui';
 import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
 
 export default {
@@ -7,6 +7,9 @@ export default {
     GlAlert,
     GlButton,
   },
+  directives: {
+    GlModalDirective,
+  },
   props: {
     limited: {
       type: Boolean,
@@ -60,9 +63,8 @@ export default {
         </gl-button>
         <gl-button
           v-if="mergeable"
+          v-gl-modal-directive="'modal-merge-info'"
           class="gl-alert-action"
-          data-toggle="modal"
-          data-target="#modal_merge_info"
         >
           {{ __('Merge locally') }}
         </gl-button>