Move Ci pipeline graph mounted logic to an immediate watcher

Because pipeline_editor component can be used in multiple sections,
we cannot know if the rendering will only happen in mount lifecycle.
Instead, we move the logic to an immediate watcher where the render
can be trigger if:
- The component mounts for the first time
- The pipelineData prop changes

This also merges other watchers that were made to report error since
they are also dependants on the pipelineData.

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -126,33 +126,22 @@ export default {
     },
   },
   watch: {
-    isPipelineDataEmpty: {
+    pipelineData: {
       immediate: true,
-      handler(isDataEmpty) {
-        if (isDataEmpty) {
+      handler() {
+        if (this.isPipelineDataEmpty) {
           this.reportFailure(EMPTY_PIPELINE_DATA);
-        }
-      },
-    },
-    isInvalidCiConfig: {
-      immediate: true,
-      handler(isInvalid) {
-        if (isInvalid) {
+        } else if (this.isInvalidCiConfig) {
           this.reportFailure(INVALID_CI_CONFIG);
+        } else {
+          this.$nextTick(() => {
+            this.computeGraphDimensions();
+            this.prepareLinkData();
+          });
         }
       },
     },
   },
-  mounted() {
-    if (!this.isPipelineDataEmpty && !this.isInvalidCiConfig) {
-      // This guarantee that all sub-elements are rendered
-      // https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted
-      this.$nextTick(() => {
-        this.getGraphDimensions();
-        this.prepareLinkData();
-      });
-    }
-  },
   methods: {
     prepareLinkData() {
       try {
@@ -194,7 +183,7 @@ export default {
     removeHighlightNeeds() {
       this.highlightedJob = null;
     },
-    getGraphDimensions() {
+    computeGraphDimensions() {
       this.width = `${this.$refs[this.$options.CONTAINER_REF].scrollWidth}`;
       this.height = `${this.$refs[this.$options.CONTAINER_REF].scrollHeight}`;
     },