diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
index 241219404a..2e70b53f80 100644
--- a/src/plugins/plot/legend/PlotLegend.vue
+++ b/src/plugins/plot/legend/PlotLegend.vue
@@ -133,15 +133,29 @@ export default {
     },
     data() {
         return {
-            isLegendHidden: this.legend.get('hideLegendWhenSmall') !== true,
-            isLegendExpanded: this.legend.get('expanded') === true,
-            showTimestampWhenExpanded: this.legend.get('showTimestampWhenExpanded') === true,
-            showValueWhenExpanded: this.legend.get('showValueWhenExpanded') === true,
-            showUnitsWhenExpanded: this.legend.get('showUnitsWhenExpanded') === true,
-            showMinimumWhenExpanded: this.legend.get('showMinimumWhenExpanded') === true,
-            showMaximumWhenExpanded: this.legend.get('showMaximumWhenExpanded') === true
+            isLegendExpanded: this.legend.get('expanded') === true
         };
     },
+    computed: {
+        showUnitsWhenExpanded() {
+            return this.legend.get('showUnitsWhenExpanded') === true;
+        },
+        showMinimumWhenExpanded() {
+            return this.legend.get('showMinimumWhenExpanded') === true;
+        },
+        showMaximumWhenExpanded() {
+            return this.legend.get('showMaximumWhenExpanded') === true;
+        },
+        showValueWhenExpanded() {
+            return this.legend.get('showValueWhenExpanded') === true;
+        },
+        showTimestampWhenExpanded() {
+            return this.legend.get('showTimestampWhenExpanded') === true;
+        },
+        isLegendHidden() {
+            return this.legend.get('hideLegendWhenSmall') === true;
+        }
+    },
     methods: {
         expandLegend() {
             this.isLegendExpanded = !this.isLegendExpanded;
diff --git a/src/plugins/plot/legend/PlotLegendItemExpanded.vue b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
index 70e5462c06..939f7e8809 100644
--- a/src/plugins/plot/legend/PlotLegendItemExpanded.vue
+++ b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
@@ -94,11 +94,6 @@ export default {
     },
     data() {
         return {
-            showTimestampWhenExpanded: this.legend.get('showTimestampWhenExpanded'),
-            showValueWhenExpanded: this.legend.get('showValueWhenExpanded'),
-            showUnitsWhenExpanded: this.legend.get('showUnitsWhenExpanded'),
-            showMinimumWhenExpanded: this.legend.get('showMinimumWhenExpanded'),
-            showMaximumWhenExpanded: this.legend.get('showMaximumWhenExpanded'),
             isMissing: false,
             colorAsHexString: '',
             name: '',
@@ -110,6 +105,23 @@ export default {
             mctLimitStateClass: ''
         };
     },
+    computed: {
+        showUnitsWhenExpanded() {
+            return this.legend.get('showUnitsWhenExpanded') === true;
+        },
+        showMinimumWhenExpanded() {
+            return this.legend.get('showMinimumWhenExpanded') === true;
+        },
+        showMaximumWhenExpanded() {
+            return this.legend.get('showMaximumWhenExpanded') === true;
+        },
+        showValueWhenExpanded() {
+            return this.legend.get('showValueWhenExpanded') === true;
+        },
+        showTimestampWhenExpanded() {
+            return this.legend.get('showTimestampWhenExpanded') === true;
+        }
+    },
     watch: {
         highlights(newHighlights) {
             const highlightedObject = newHighlights.find(highlight => highlight.series.keyString === this.seriesObject.keyString);