Use GlModalDirective as GlModal

app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue

@@ -3,7 +3,6 @@ import { GlFormGroup, GlFormInput, GlModal, GlSprintf, GlLink } from '@gitlab/ui
 import { mapActions, mapState } from 'vuex';
 import { mapComputed } from '~/vuex_shared/bindings';
 import { __ } from '~/locale';
-import { MODAL_ID } from '../utils/constants';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import { isValidCron } from 'cron-validator';
 
@@ -18,7 +17,7 @@ export default {
   },
   modalOptions: {
     ref: 'modal',
-    modalId: MODAL_ID,
+    modalId: 'deploy-freeze-modal',
     title: __('Add deploy freeze'),
     actionCancel: {
       text: __('Cancel'),

app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue

@@ -2,10 +2,8 @@
 import { GlTable, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { mapState, mapActions } from 'vuex';
-import { MODAL_ID } from '../utils/constants';
 
 export default {
-  modalId: MODAL_ID,
   fields: [
     {
       key: 'freezeStart',
@@ -29,7 +27,7 @@ export default {
     GlSprintf,
   },
   directives: {
-    GlModalDirective,
+    GlModal: GlModalDirective,
   },
   computed: {
     ...mapState(['freezePeriods']),
@@ -73,7 +71,7 @@ export default {
     </gl-table>
     <div class="gl-display-flex gl-justify-content-center">
       <gl-button
-        v-gl-modal-directive="$options.modalId"
+        v-gl-modal.deploy-freeze-modal
         data-testid="add-deploy-freeze"
         category="primary"
         variant="success"