diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
index 5548408f..5cfcec98 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -44,8 +44,9 @@ export default {
   name: "StageControlSettings",
 
   computed: {
-    // Note that as stepSize and invert are set based on internals we can use
-    // get() and set() to interact with the store. Instead use a deep watcher to
+    // Note that as stepSize and invert are mutated (i.e. we change stepSize.x not stepSize)
+    // rather than directly set we cannot use get() and set() computed to interact with the
+    // store as changed won't be detected by set(). Instead use a deep watcher to
     // update the store (see ``watch:`` below)
     stepSize() {
       return this.$store.state.navigationStepSize;
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 97ca3fbc..681fadce 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -5,9 +5,9 @@
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
         <li class="uk-nav-header">Application Settings</li>
-        <li v-for="item in appTabs" :key="'setting' + item.id + '-tab-content'">
+        <li v-for="item in appTabs" :key="'setting-' + item.id + '-tab-content'">
           <tabIcon
-            :id="'setting' + item.id + '-tab-content'"
+            :id="'setting-' + item.id + '-tab-content'"
             :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
@@ -27,9 +27,9 @@
         >
           Launch Calibration Wizard
         </button>
-        <li v-for="item in calibrationTabs" :key="'setting' + item.id + '-tab-content'">
+        <li v-for="item in calibrationTabs" :key="'setting-' + item.id + '-tab-icon'">
           <tabIcon
-            :id="'setting' + item.id + '-tab-content'"
+            :id="'setting-' + item.id + '-tab-icon'"
             :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
@@ -45,8 +45,8 @@
     <div class="view-component uk-width-expand uk-padding-small">
       <tabContent
         v-for="item in allTabs"
-        :id="'setting' + item.id + '-tab-content'"
-        :key="'setting' + item.id + '-tab-content'"
+        :id="'setting-' + item.id + '-tab-content'"
+        :key="'setting-' + item.id + '-tab-content'"
         :tab-i-d="item.id"
         :require-connection="item.requireConnection"
         :current-tab="currentTab"