1 files changed, 28 insertions, 28 deletions
diff --git a/app/assets/javascripts/alerts_settings/index.js b/app/assets/javascripts/alerts_settings/index.js
index a4c2bf6b18e..8d1d342d229 100644
--- a/app/assets/javascripts/alerts_settings/index.js
+++ b/app/assets/javascripts/alerts_settings/index.js
@@ -31,37 +31,37 @@ export default el => {
   const opsgenieMvcActivated = parseBoolean(opsgenieMvcEnabled);
   const opsgenieMvcIsAvailable = parseBoolean(opsgenieMvcAvailable);
 
-  const props = {
-    prometheus: {
-      activated: prometheusIsActivated,
-      prometheusUrl,
-      prometheusAuthorizationKey,
-      prometheusFormPath,
-      prometheusResetKeyPath,
-      prometheusApiUrl,
-    },
-    generic: {
-      alertsSetupUrl,
-      alertsUsageUrl,
-      activated: genericActivated,
-      formPath,
-      initialAuthorizationKey: authorizationKey,
-      url,
-    },
-    opsgenie: {
-      formPath: opsgenieMvcFormPath,
-      activated: opsgenieMvcActivated,
-      opsgenieMvcTargetUrl,
-      opsgenieMvcIsAvailable,
-    },
-  };
-
   return new Vue({
     el,
+    provide: {
+      prometheus: {
+        activated: prometheusIsActivated,
+        prometheusUrl,
+        authorizationKey: prometheusAuthorizationKey,
+        prometheusFormPath,
+        prometheusResetKeyPath,
+        prometheusApiUrl,
+      },
+      generic: {
+        alertsSetupUrl,
+        alertsUsageUrl,
+        activated: genericActivated,
+        formPath,
+        authorizationKey,
+        url,
+      },
+      opsgenie: {
+        formPath: opsgenieMvcFormPath,
+        activated: opsgenieMvcActivated,
+        opsgenieMvcTargetUrl,
+        opsgenieMvcIsAvailable,
+      },
+    },
+    components: {
+      AlertSettingsForm,
+    },
     render(createElement) {
-      return createElement(AlertSettingsForm, {
-        props,
-      });
+      return createElement('alert-settings-form');
     },
   });
 };