diff --git a/client/src/components/RuleBuilder/SaveRules.vue b/client/src/components/RuleBuilder/SaveRules.vue
new file mode 100644
index 00000000000..feec0989f6d
--- /dev/null
+++ b/client/src/components/RuleBuilder/SaveRules.vue
@@ -0,0 +1,54 @@
+<script>
+import { getGalaxyInstance } from "app";
+export default {
+    data: function () {
+        return {
+            savedRules: [],
+        };
+    },
+    created() {
+        let counter = 0;
+        if (this.user == null) {
+            return;
+        } else {
+            for (let i = 0; i < localStorage.length; i++) {
+                if (localStorage.key(i).startsWith(this.prefix + this.user)) {
+                    var savedSession = localStorage.getItem(localStorage.key(i));
+                    if (savedSession) {
+                        var key = localStorage.key(i);
+                        this.savedRules.push({
+                            dateTime: key.substring(this.prefix.length + this.user.length),
+                            rule: savedSession,
+                        });
+                    }
+                    counter++;
+                    if (counter == 10) {
+                        break;
+                    }
+                }
+            }
+        }
+    },
+    props: {
+        prefix: {
+            type: String,
+            default: "galaxy_rules_",
+        },
+        user: {
+            type: String,
+            default: getGalaxyInstance() ? getGalaxyInstance().user.id : "",
+        },
+    },
+    methods: {
+        saveSession(jsonRulesString) {
+            var dateTimeString = new Date().toISOString();
+            var key = this.prefix + this.user + dateTimeString;
+            localStorage.setItem(key, jsonRulesString);
+            this.savedRules.push({
+                dateTime: dateTimeString,
+                rule: jsonRulesString,
+            });
+        },
+    },
+};
+</script>
diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.vue b/client/src/components/RuleBuilder/SavedRulesSelector.vue
index ab0f20c1fb3..818f77bb134 100644
--- a/client/src/components/RuleBuilder/SavedRulesSelector.vue
+++ b/client/src/components/RuleBuilder/SavedRulesSelector.vue
@@ -32,40 +32,12 @@ export default {
     data: function () {
         return {
             savedRulesMenu: _l("Recently used rules"),
-            savedRules: [],
         };
     },
-    created() {
-        let counter = 0;
-        if (this.user == null) {
-            return;
-        } else {
-            for (let i = 0; i < localStorage.length; i++) {
-                if (localStorage.key(i).startsWith(this.prefix + this.user)) {
-                    var savedSession = localStorage.getItem(localStorage.key(i));
-                    if (savedSession) {
-                        var key = localStorage.key(i);
-                        this.savedRules.push({
-                            dateTime: key.substring(this.prefix.length + this.user.length),
-                            rule: savedSession,
-                        });
-                    }
-                    counter++;
-                    if (counter == 10) {
-                        break;
-                    }
-                }
-            }
-        }
-    },
     props: {
-        prefix: {
-            type: String,
-            default: "galaxy_rules_",
-        },
-        user: {
-            type: String,
-            default: getGalaxyInstance() ? getGalaxyInstance().user.id : "",
+        savedRules: {
+            type: Array,
+            required: true,
         },
     },
     computed: {
@@ -77,15 +49,6 @@ export default {
         formatDate(dateTime) {
             return moment.utc(dateTime).from(moment().utc());
         },
-        saveSession(jsonRulesString) {
-            var dateTimeString = new Date().toISOString();
-            var key = this.prefix + this.user + dateTimeString;
-            localStorage.setItem(key, jsonRulesString);
-            this.savedRules.push({
-                dateTime: dateTimeString,
-                rule: jsonRulesString,
-            });
-        },
     },
 };
 </script>
diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index 65128443031..481f7d8f6b8 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -347,7 +347,7 @@
                                     :title="titleViewSource"
                                     @click="viewSource"
                                 ></span>
-                                <saved-rules-selector ref="savedRulesSelector" @update-rules="restoreRules" />
+                                <saved-rules-selector ref="savedRulesSelector" @update-rules="restoreRules" :savedRules="this.savedRules"/>
                             </span>
                             <div v-if="jaggedData" class="rule-warning">
                                 Rows contain differing numbers of columns, there was likely a problem parsing your data.
@@ -608,6 +608,7 @@ import RuleModalMiddle from "components/RuleBuilder/RuleModalMiddle";
 import RuleModalFooter from "components/RuleBuilder/RuleModalFooter";
 import StateDiv from "components/RuleBuilder/StateDiv";
 import SavedRulesSelector from "components/RuleBuilder/SavedRulesSelector";
+import SaveRules from "components/RuleBuilder/SaveRules";
 
 Vue.use(BootstrapVue);
 
@@ -1071,6 +1072,7 @@ export default {
             return this.hotData.colHeadersPerRule;
         },
     },
+    mixins: [SaveRules],
     methods: {
         restoreRules(event) {
             const json = JSON.parse(event);
@@ -1275,7 +1277,7 @@ export default {
                 this.state = "error";
                 return;
             }
-            this.$refs.savedRulesSelector.saveSession(JSON.stringify(asJson));
+            this.saveSession(JSON.stringify(asJson));
             this.state = "wait";
             const name = this.collectionName;
             const collectionType = this.collectionType;