diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue
index d28a84e750ec4a999a5ca9bdf8e362d3ecbacb8a..30d4f40efb229c25eb9a16067c384fb20cb409d9 100644
--- a/src/components/RouteBlock.vue
+++ b/src/components/RouteBlock.vue
@@ -14,7 +14,6 @@
     <label for="request-response">REQUEST RESPONSE</label>
     <textarea v-model="apiResponse" name="request-response"></textarea>
     <button @click="fetchData">🏃🏽 RUN</button>
-    <button @click="saveData">💾 SAVE</button>
     <button @click="deleteRoute">💣 DELETE</button>
   </div>
 </template>
@@ -38,30 +37,50 @@ export default {
       required: true,
     },
   },
-  created() {
-    const a = this.$store.getters.routeData(this.idx);
-    this.routeVerb = a.routeVerb;
-    this.routePath = a.routePath;
-    this.routeBody = a.routeBody;
-  },
   data() {
     return {
-      routeVerb: '',
-      routePath: '',
-      routeBody: '',
       apiResponse: '',
     };
   },
   computed: {
-    routeDataStore() {
-      return this.$store.getters.routeData(this.idx);
+    routeVerb: {
+      get() {
+        return this.$store.getters.routeData(this.idx).routeVerb;
+      },
+      set(value) {
+        const data = {
+          idx: this.idx,
+          routeVerb: value,
+        };
+
+        this.$store.commit('UPDATE_ROUTE_VERB', data);
+      },
     },
-  },
-  watch: {
-    routeDataStore(nVal) {
-      this.routeVerb = nVal.routeVerb;
-      this.routePath = nVal.routePath;
-      this.routeBody = nVal.routeBody;
+    routePath: {
+      get() {
+        return this.$store.getters.routeData(this.idx).routePath;
+      },
+      set(value) {
+        const data = {
+          idx: this.idx,
+          routePath: value,
+        };
+
+        this.$store.commit('UPDATE_ROUTE_PATH', data);
+      },
+    },
+    routeBody: {
+      get() {
+        return this.$store.getters.routeData(this.idx).routeBody;
+      },
+      set(value) {
+        const data = {
+          idx: this.idx,
+          routeBody: value,
+        };
+
+        this.$store.commit('UPDATE_ROUTE_BODY', data);
+      },
     },
   },
   methods: {
@@ -76,15 +95,6 @@ export default {
           this.apiResponse = JSON.stringify(res);
         });
     },
-    saveData() {
-      this.$store.dispatch('UPDATE_ROUTE',
-        {
-          idx: this.idx,
-          routeVerb: this.routeVerb,
-          routePath: this.routePath,
-          routeBody: this.routeBody,
-        });
-    },
     deleteRoute() {
       this.$store.dispatch('DELETE_ROUTE', this.idx);
     },
diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index d0e67a1a34d58006318022de557deb0430dd2e5a..63a3449a0d914627af1ef8e39d5e14dfd4d3d08e 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -33,6 +33,21 @@ export default {
     DELETE_ROUTE(state, idx) {
       state.routeCollection.splice(idx, 1);
     },
+    UPDATE_ROUTE_VERB(state, data) {
+      const payload = state.routeCollection[data.idx];
+      payload.routeVerb = data.routeVerb;
+      Vue.set(state.routeCollection, data.idx, payload);
+    },
+    UPDATE_ROUTE_PATH(state, data) {
+      const payload = state.routeCollection[data.idx];
+      payload.routePath = data.routePath;
+      Vue.set(state.routeCollection, data.idx, payload);
+    },
+    UPDATE_ROUTE_BODY(state, data) {
+      const payload = state.routeCollection[data.idx];
+      payload.routeBody = data.routeBody;
+      Vue.set(state.routeCollection, data.idx, payload);
+    },
   },
   actions: {
     ADD_ROUTE({ commit }) {