diff --git a/pages/graphql.vue b/pages/graphql.vue
index ab04eb41b..0dfdae88e 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -364,7 +364,6 @@ export default {
   data() {
     return {
       schemaString: "",
-      variableString: "{}",
       commonHeaders: [
         "WWW-Authenticate",
         "Authorization",
@@ -527,6 +526,14 @@ export default {
         this.$store.commit("setGQLState", { value, attribute: "query" });
       }
     },
+    variableString: {
+      get() {
+        return this.$store.state.gql.variablesJSONString;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", { value, attribute: "variablesJSONString" });
+      }
+    },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)
diff --git a/store/state.js b/store/state.js
index e6ab3b51d..7667b1d0a 100644
--- a/store/state.js
+++ b/store/state.js
@@ -20,7 +20,7 @@ export default () => ({
   gql: {
     url: "https://rickandmortyapi.com/graphql",
     headers: [],
-    variables: [],
+    variablesJSONString: "",
     query: ""
   },
   oauth2: {