1 files changed, 20 insertions, 3 deletions
diff --git a/app/assets/javascripts/monitoring/monitoring_app.js b/app/assets/javascripts/monitoring/monitoring_app.js
index 307154c9a84..ee67e5dd827 100644
--- a/app/assets/javascripts/monitoring/monitoring_app.js
+++ b/app/assets/javascripts/monitoring/monitoring_app.js
@@ -1,7 +1,7 @@
-import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
-import { createStore } from './stores';
+import Vue from 'vue';
 import createRouter from './router';
+import { createStore } from './stores';
 import { stateAndPropsFromDataset } from './utils';
 
 Vue.use(GlToast);
@@ -26,7 +26,24 @@ export default (props = {}) => {
           dashboardProps: { ...dataProps, ...props },
         };
       },
-      template: `<router-view :dashboardProps="dashboardProps"/>`,
+      render(h) {
+        return h('RouterView', {
+          // This is attrs rather than props because:
+          //  1. RouterView only actually defines one prop: `name`.
+          //  2. The RouterView [throws away other props][1] given to it, in
+          //     favour of those configured in the route config/params.
+          //  3. The Vue template compiler itself in general compiles anything
+          //     like <some-component :foo="bar" /> into roughly
+          //     h('some-component', { attrs: { foo: bar } }). Then later, Vue
+          //     [extract props from attrs and merges them with props][2],
+          //     matching them up according to the component's definition.
+          // [1]: https://github.com/vuejs/vue-router/blob/v3.4.9/src/components/view.js#L124
+          // [2]: https://github.com/vuejs/vue/blob/v2.6.12/src/core/vdom/helpers/extract-props.js#L12-L50
+          attrs: {
+            dashboardProps: this.dashboardProps,
+          },
+        });
+      },
     });
   }
 };