diff --git a/dist/vue-relay.common.js b/dist/vue-relay.common.js
index 8b9837e..be33845 100644
--- a/dist/vue-relay.common.js
+++ b/dist/vue-relay.common.js
@@ -360,22 +360,24 @@ var fetchQueryAndComputeStateFromProps = function fetchQueryAndComputeStateFromP
   }
 };
 
+var props = {
+  cacheConfig: {},
+  dataFrom: {},
+  environment: {
+    required: true
+  },
+  query: {},
+  variables: {
+    type: Object,
+    default: function _default() {
+      return {};
+    }
+  }
+};
+
 var QueryRenderer = {
   name: 'relay-query-renderer',
-  props: {
-    cacheConfig: {},
-    dataFrom: {},
-    environment: {
-      required: true
-    },
-    query: {},
-    variables: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    }
-  },
+  props: props,
   data: function data() {
     var _this = this;
 
@@ -411,33 +413,44 @@ var QueryRenderer = {
         }
       }),
       state: Object.freeze(_extends({
-        prevPropsEnvironment: this.$props.environment,
-        prevPropsVariables: this.$props.variables,
-        prevQuery: this.$props.query,
+        prevPropsEnvironment: this.environment,
+        prevPropsVariables: this.variables,
+        prevQuery: this.query,
         queryFetcher: queryFetcher,
         retryCallbacks: retryCallbacks
       }, state))
     };
   },
-  beforeUpdate: function beforeUpdate() {
-    if (this.state.prevQuery !== this.query || this.state.prevPropsEnvironment !== this.environment || !areEqual(this.state.prevPropsVariables, this.variables)) {
-      var state = fetchQueryAndComputeStateFromProps(this.$props, this.state.queryFetcher, this.state.retryCallbacks);
-
-      // React getDerivedStateFromProps is static method.
-      // Vue beforeUpdate is instance method.
-      // Thus updaing relayContext here instead of in render.
-      this.context.relay.environment = state.relayContextEnvironment;
-      this.context.relay.variables = state.relayContextVariables;
 
-      this.setState(_extends({
-        prevQuery: this.query,
-        prevPropsEnvironment: this.environment,
-        prevPropsVariables: this.variables
-      }, state));
+  methods: {
+    setState: function setState(state) {
+      this.state = Object.freeze(_extends({}, this.state, state));
     }
   },
-  beforeDestroy: function beforeDestroy() {
-    this.state.queryFetcher.dispose();
+  watch: _extends({}, Object.keys(props).map(function (key) {
+    return defineProperty({}, key, function () {
+      if (this.state.prevQuery !== this.query || this.state.prevPropsEnvironment !== this.environment || !areEqual(this.state.prevPropsVariables, this.variables)) {
+        var state = fetchQueryAndComputeStateFromProps(this.$props, this.state.queryFetcher, this.state.retryCallbacks);
+
+        // React getDerivedStateFromProps is static method.
+        // Vue beforeUpdate is instance method.
+        // Thus updaing relayContext here instead of in render.
+        this.context.relay.environment = state.relayContextEnvironment;
+        this.context.relay.variables = state.relayContextVariables;
+
+        this.setState(_extends({
+          prevQuery: this.query,
+          prevPropsEnvironment: this.environment,
+          prevPropsVariables: this.variables
+        }, state));
+      }
+    });
+  })),
+  render: function render(h) {
+    if (process.env.NODE_ENV !== 'production') {
+      require('relay-runtime/lib/deepFreeze')(this.state.renderProps);
+    }
+    return h(this.component);
   },
   created: function created() {
     var _this2 = this;
@@ -456,17 +469,8 @@ var QueryRenderer = {
       }
     };
   },
-  render: function render(h) {
-    if (process.env.NODE_ENV !== 'production') {
-      require('relay-runtime/lib/deepFreeze')(this.state.renderProps);
-    }
-    return h(this.component);
-  },
-
-  methods: {
-    setState: function setState(state) {
-      this.state = Object.freeze(_extends({}, this.state, state));
-    }
+  beforeDestroy: function beforeDestroy() {
+    this.state.queryFetcher.dispose();
   }
 };
 
@@ -494,6 +498,11 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
   return {
     name: 'relay-context-consumer',
     inject: ['relay'],
+    render: function render(h) {
+      return h(this.component, {
+        props: this.$attrs
+      });
+    },
     created: function created() {
       var relay = assertRelayContext(this.relay);
       var getFragmentFromTag = relay.environment.unstable_internal.getFragment;
@@ -505,6 +514,12 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
       this.component = {
         extends: createContainerWithFragments.call(this, fragments),
         props: Object.keys(fragments),
+        render: function render(h) {
+          if (this.context) {
+            return h(this.component);
+          }
+          return this.component.render(h);
+        },
         created: function created() {
           var _this = this;
 
@@ -530,19 +545,8 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
               })));
             }
           };
-        },
-        render: function render(h) {
-          if (this.context) {
-            return h(this.component);
-          }
-          return this.component.render(h);
         }
       };
-    },
-    render: function render(h) {
-      return h(this.component, {
-        props: this.$attrs
-      });
     }
   };
 };
@@ -583,47 +587,6 @@ var createContainerWithFragments = function createContainerWithFragments(fragmen
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
-
-
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$1(prevIDs, nextIDs)) {
-        this._release();
-
-        this.context.relay.environment = relay.environment;
-        this.context.relay.variables = relay.variables;
-
-        var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver: resolver
-        });
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props);
-      }
-      var data = this.state.resolver.resolve();
-      if (data !== this.state.data) {
-        this.setState({ data: data });
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      this._release();
-    },
 
     methods: {
       setState: function setState(state) {
@@ -742,6 +705,49 @@ var createContainerWithFragments = function createContainerWithFragments(fragmen
           this.state.queryFetcher.dispose();
         }
       }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
+
+
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
+
+        // If the environment has changed or props point to new records then
+        // previously fetched data and any pending fetches no longer apply:
+        // - Existing references are on the old environment.
+        // - Existing references are based on old variables.
+        // - Pending fetches are for the previous records.
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$1(prevIDs, nextIDs)) {
+          this._release();
+
+          this.context.relay.environment = relay.environment;
+          this.context.relay.variables = relay.variables;
+
+          var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+
+          this.setState({
+            prevProps: this.$props,
+            relayEnvironment: relay.environment,
+            relayVariables: relay.variables,
+            relayProp: this._buildRelayProp(relay),
+            localVariables: null,
+            resolver: resolver
+          });
+        } else if (!this.state.localVariables) {
+          this.state.resolver.setProps(this.$props);
+        }
+        var data = this.state.resolver.resolve();
+        if (data !== this.state.data) {
+          this.setState({ data: data });
+        }
+      });
+    })),
+    beforeDestroy: function beforeDestroy() {
+      this._release();
     }
   };
 };
@@ -869,47 +875,6 @@ var createContainerWithFragments$1 = function createContainerWithFragments(fragm
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
-
-
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$2(prevIDs, nextIDs)) {
-        this._release();
-
-        this.context.relay.environment = relay.environment;
-        this.context.relay.variables = relay.variables;
-
-        var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver: resolver
-        });
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props);
-      }
-      var data = this.state.resolver.resolve();
-      if (data !== this.state.data) {
-        this.setState({ data: data });
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      this._release();
-    },
 
     methods: {
       setState: function setState(state) {
@@ -1122,6 +1087,49 @@ var createContainerWithFragments$1 = function createContainerWithFragments(fragm
           this.state.queryFetcher.dispose();
         }
       }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
+
+
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
+
+        // If the environment has changed or props point to new records then
+        // previously fetched data and any pending fetches no longer apply:
+        // - Existing references are on the old environment.
+        // - Existing references are based on old variables.
+        // - Pending fetches are for the previous records.
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$2(prevIDs, nextIDs)) {
+          this._release();
+
+          this.context.relay.environment = relay.environment;
+          this.context.relay.variables = relay.variables;
+
+          var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+
+          this.setState({
+            prevProps: this.$props,
+            relayEnvironment: relay.environment,
+            relayVariables: relay.variables,
+            relayProp: this._buildRelayProp(relay),
+            localVariables: null,
+            resolver: resolver
+          });
+        } else if (!this.state.localVariables) {
+          this.state.resolver.setProps(this.$props);
+        }
+        var data = this.state.resolver.resolve();
+        if (data !== this.state.data) {
+          this.setState({ data: data });
+        }
+      });
+    })),
+    beforeDestroy: function beforeDestroy() {
+      this._release();
     }
   };
 };
@@ -1169,67 +1177,69 @@ var createContainerWithFragments$2 = function createContainerWithFragments(fragm
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
 
+    methods: {
+      setState: function setState(state) {
+        this.state = Object.freeze(_extends({}, this.state, state));
+      },
+      _handleFragmentDataUpdate: function _handleFragmentDataUpdate() {
+        this.setState({
+          data: this.state.resolver.resolve(),
+          relayProp: {
+            isLoading: this.state.resolver.isLoading(),
+            environment: this.state.relayProp.environment
+          }
+        });
+      }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
 
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
 
-      var resolver = this.state.resolver;
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
 
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$3(prevIDs, nextIDs)) {
-        resolver.dispose();
-        resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+        var resolver = this.state.resolver;
 
-        this.setState({
-          data: resolver.resolve(),
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: {
-            isLoading: resolver.isLoading(),
-            environment: relay.environment
-          },
-          resolver: resolver
-        });
-      } else {
-        resolver.setProps(this.$props);
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$3(prevIDs, nextIDs)) {
+          resolver.dispose();
+          resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
 
-        var data = resolver.resolve();
-        if (data !== this.state.data) {
           this.setState({
-            data: data,
+            data: resolver.resolve(),
             prevProps: this.$props,
             relayEnvironment: relay.environment,
             relayVariables: relay.variables,
             relayProp: {
               isLoading: resolver.isLoading(),
               environment: relay.environment
-            }
+            },
+            resolver: resolver
           });
+        } else {
+          resolver.setProps(this.$props);
+
+          var data = resolver.resolve();
+          if (data !== this.state.data) {
+            this.setState({
+              data: data,
+              prevProps: this.$props,
+              relayEnvironment: relay.environment,
+              relayVariables: relay.variables,
+              relayProp: {
+                isLoading: resolver.isLoading(),
+                environment: relay.environment
+              }
+            });
+          }
         }
-      }
-    },
+      });
+    })),
     beforeDestroy: function beforeDestroy() {
       this.state.resolver.dispose();
-    },
-
-    methods: {
-      setState: function setState(state) {
-        this.state = Object.freeze(_extends({}, this.state, state));
-      },
-      _handleFragmentDataUpdate: function _handleFragmentDataUpdate() {
-        this.setState({
-          data: this.state.resolver.resolve(),
-          relayProp: {
-            isLoading: this.state.resolver.isLoading(),
-            environment: this.state.relayProp.environment
-          }
-        });
-      }
     }
   };
 };
diff --git a/dist/vue-relay.esm.js b/dist/vue-relay.esm.js
index 0e0d042..f97b8d1 100644
--- a/dist/vue-relay.esm.js
+++ b/dist/vue-relay.esm.js
@@ -358,22 +358,24 @@ var fetchQueryAndComputeStateFromProps = function fetchQueryAndComputeStateFromP
   }
 };
 
+var props = {
+  cacheConfig: {},
+  dataFrom: {},
+  environment: {
+    required: true
+  },
+  query: {},
+  variables: {
+    type: Object,
+    default: function _default() {
+      return {};
+    }
+  }
+};
+
 var QueryRenderer = {
   name: 'relay-query-renderer',
-  props: {
-    cacheConfig: {},
-    dataFrom: {},
-    environment: {
-      required: true
-    },
-    query: {},
-    variables: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    }
-  },
+  props: props,
   data: function data() {
     var _this = this;
 
@@ -409,33 +411,44 @@ var QueryRenderer = {
         }
       }),
       state: Object.freeze(_extends({
-        prevPropsEnvironment: this.$props.environment,
-        prevPropsVariables: this.$props.variables,
-        prevQuery: this.$props.query,
+        prevPropsEnvironment: this.environment,
+        prevPropsVariables: this.variables,
+        prevQuery: this.query,
         queryFetcher: queryFetcher,
         retryCallbacks: retryCallbacks
       }, state))
     };
   },
-  beforeUpdate: function beforeUpdate() {
-    if (this.state.prevQuery !== this.query || this.state.prevPropsEnvironment !== this.environment || !areEqual(this.state.prevPropsVariables, this.variables)) {
-      var state = fetchQueryAndComputeStateFromProps(this.$props, this.state.queryFetcher, this.state.retryCallbacks);
-
-      // React getDerivedStateFromProps is static method.
-      // Vue beforeUpdate is instance method.
-      // Thus updaing relayContext here instead of in render.
-      this.context.relay.environment = state.relayContextEnvironment;
-      this.context.relay.variables = state.relayContextVariables;
 
-      this.setState(_extends({
-        prevQuery: this.query,
-        prevPropsEnvironment: this.environment,
-        prevPropsVariables: this.variables
-      }, state));
+  methods: {
+    setState: function setState(state) {
+      this.state = Object.freeze(_extends({}, this.state, state));
     }
   },
-  beforeDestroy: function beforeDestroy() {
-    this.state.queryFetcher.dispose();
+  watch: _extends({}, Object.keys(props).map(function (key) {
+    return defineProperty({}, key, function () {
+      if (this.state.prevQuery !== this.query || this.state.prevPropsEnvironment !== this.environment || !areEqual(this.state.prevPropsVariables, this.variables)) {
+        var state = fetchQueryAndComputeStateFromProps(this.$props, this.state.queryFetcher, this.state.retryCallbacks);
+
+        // React getDerivedStateFromProps is static method.
+        // Vue beforeUpdate is instance method.
+        // Thus updaing relayContext here instead of in render.
+        this.context.relay.environment = state.relayContextEnvironment;
+        this.context.relay.variables = state.relayContextVariables;
+
+        this.setState(_extends({
+          prevQuery: this.query,
+          prevPropsEnvironment: this.environment,
+          prevPropsVariables: this.variables
+        }, state));
+      }
+    });
+  })),
+  render: function render(h) {
+    if (process.env.NODE_ENV !== 'production') {
+      require('relay-runtime/lib/deepFreeze')(this.state.renderProps);
+    }
+    return h(this.component);
   },
   created: function created() {
     var _this2 = this;
@@ -454,17 +467,8 @@ var QueryRenderer = {
       }
     };
   },
-  render: function render(h) {
-    if (process.env.NODE_ENV !== 'production') {
-      require('relay-runtime/lib/deepFreeze')(this.state.renderProps);
-    }
-    return h(this.component);
-  },
-
-  methods: {
-    setState: function setState(state) {
-      this.state = Object.freeze(_extends({}, this.state, state));
-    }
+  beforeDestroy: function beforeDestroy() {
+    this.state.queryFetcher.dispose();
   }
 };
 
@@ -492,6 +496,11 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
   return {
     name: 'relay-context-consumer',
     inject: ['relay'],
+    render: function render(h) {
+      return h(this.component, {
+        props: this.$attrs
+      });
+    },
     created: function created() {
       var relay = assertRelayContext(this.relay);
       var getFragmentFromTag = relay.environment.unstable_internal.getFragment;
@@ -503,6 +512,12 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
       this.component = {
         extends: createContainerWithFragments.call(this, fragments),
         props: Object.keys(fragments),
+        render: function render(h) {
+          if (this.context) {
+            return h(this.component);
+          }
+          return this.component.render(h);
+        },
         created: function created() {
           var _this = this;
 
@@ -528,19 +543,8 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
               })));
             }
           };
-        },
-        render: function render(h) {
-          if (this.context) {
-            return h(this.component);
-          }
-          return this.component.render(h);
         }
       };
-    },
-    render: function render(h) {
-      return h(this.component, {
-        props: this.$attrs
-      });
     }
   };
 };
@@ -581,47 +585,6 @@ var createContainerWithFragments = function createContainerWithFragments(fragmen
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
-
-
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$1(prevIDs, nextIDs)) {
-        this._release();
-
-        this.context.relay.environment = relay.environment;
-        this.context.relay.variables = relay.variables;
-
-        var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver: resolver
-        });
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props);
-      }
-      var data = this.state.resolver.resolve();
-      if (data !== this.state.data) {
-        this.setState({ data: data });
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      this._release();
-    },
 
     methods: {
       setState: function setState(state) {
@@ -740,6 +703,49 @@ var createContainerWithFragments = function createContainerWithFragments(fragmen
           this.state.queryFetcher.dispose();
         }
       }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
+
+
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
+
+        // If the environment has changed or props point to new records then
+        // previously fetched data and any pending fetches no longer apply:
+        // - Existing references are on the old environment.
+        // - Existing references are based on old variables.
+        // - Pending fetches are for the previous records.
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$1(prevIDs, nextIDs)) {
+          this._release();
+
+          this.context.relay.environment = relay.environment;
+          this.context.relay.variables = relay.variables;
+
+          var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+
+          this.setState({
+            prevProps: this.$props,
+            relayEnvironment: relay.environment,
+            relayVariables: relay.variables,
+            relayProp: this._buildRelayProp(relay),
+            localVariables: null,
+            resolver: resolver
+          });
+        } else if (!this.state.localVariables) {
+          this.state.resolver.setProps(this.$props);
+        }
+        var data = this.state.resolver.resolve();
+        if (data !== this.state.data) {
+          this.setState({ data: data });
+        }
+      });
+    })),
+    beforeDestroy: function beforeDestroy() {
+      this._release();
     }
   };
 };
@@ -867,47 +873,6 @@ var createContainerWithFragments$1 = function createContainerWithFragments(fragm
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
-
-
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$2(prevIDs, nextIDs)) {
-        this._release();
-
-        this.context.relay.environment = relay.environment;
-        this.context.relay.variables = relay.variables;
-
-        var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver: resolver
-        });
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props);
-      }
-      var data = this.state.resolver.resolve();
-      if (data !== this.state.data) {
-        this.setState({ data: data });
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      this._release();
-    },
 
     methods: {
       setState: function setState(state) {
@@ -1120,6 +1085,49 @@ var createContainerWithFragments$1 = function createContainerWithFragments(fragm
           this.state.queryFetcher.dispose();
         }
       }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
+
+
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
+
+        // If the environment has changed or props point to new records then
+        // previously fetched data and any pending fetches no longer apply:
+        // - Existing references are on the old environment.
+        // - Existing references are based on old variables.
+        // - Pending fetches are for the previous records.
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$2(prevIDs, nextIDs)) {
+          this._release();
+
+          this.context.relay.environment = relay.environment;
+          this.context.relay.variables = relay.variables;
+
+          var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+
+          this.setState({
+            prevProps: this.$props,
+            relayEnvironment: relay.environment,
+            relayVariables: relay.variables,
+            relayProp: this._buildRelayProp(relay),
+            localVariables: null,
+            resolver: resolver
+          });
+        } else if (!this.state.localVariables) {
+          this.state.resolver.setProps(this.$props);
+        }
+        var data = this.state.resolver.resolve();
+        if (data !== this.state.data) {
+          this.setState({ data: data });
+        }
+      });
+    })),
+    beforeDestroy: function beforeDestroy() {
+      this._release();
     }
   };
 };
@@ -1167,67 +1175,69 @@ var createContainerWithFragments$2 = function createContainerWithFragments(fragm
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
 
+    methods: {
+      setState: function setState(state) {
+        this.state = Object.freeze(_extends({}, this.state, state));
+      },
+      _handleFragmentDataUpdate: function _handleFragmentDataUpdate() {
+        this.setState({
+          data: this.state.resolver.resolve(),
+          relayProp: {
+            isLoading: this.state.resolver.isLoading(),
+            environment: this.state.relayProp.environment
+          }
+        });
+      }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
 
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
 
-      var resolver = this.state.resolver;
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
 
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$3(prevIDs, nextIDs)) {
-        resolver.dispose();
-        resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+        var resolver = this.state.resolver;
 
-        this.setState({
-          data: resolver.resolve(),
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: {
-            isLoading: resolver.isLoading(),
-            environment: relay.environment
-          },
-          resolver: resolver
-        });
-      } else {
-        resolver.setProps(this.$props);
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$3(prevIDs, nextIDs)) {
+          resolver.dispose();
+          resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
 
-        var data = resolver.resolve();
-        if (data !== this.state.data) {
           this.setState({
-            data: data,
+            data: resolver.resolve(),
             prevProps: this.$props,
             relayEnvironment: relay.environment,
             relayVariables: relay.variables,
             relayProp: {
               isLoading: resolver.isLoading(),
               environment: relay.environment
-            }
+            },
+            resolver: resolver
           });
+        } else {
+          resolver.setProps(this.$props);
+
+          var data = resolver.resolve();
+          if (data !== this.state.data) {
+            this.setState({
+              data: data,
+              prevProps: this.$props,
+              relayEnvironment: relay.environment,
+              relayVariables: relay.variables,
+              relayProp: {
+                isLoading: resolver.isLoading(),
+                environment: relay.environment
+              }
+            });
+          }
         }
-      }
-    },
+      });
+    })),
     beforeDestroy: function beforeDestroy() {
       this.state.resolver.dispose();
-    },
-
-    methods: {
-      setState: function setState(state) {
-        this.state = Object.freeze(_extends({}, this.state, state));
-      },
-      _handleFragmentDataUpdate: function _handleFragmentDataUpdate() {
-        this.setState({
-          data: this.state.resolver.resolve(),
-          relayProp: {
-            isLoading: this.state.resolver.isLoading(),
-            environment: this.state.relayProp.environment
-          }
-        });
-      }
     }
   };
 };
diff --git a/dist/vue-relay.js b/dist/vue-relay.js
index 1df0f54..d3dcf22 100644
--- a/dist/vue-relay.js
+++ b/dist/vue-relay.js
@@ -364,22 +364,24 @@ var fetchQueryAndComputeStateFromProps = function fetchQueryAndComputeStateFromP
   }
 };
 
+var props = {
+  cacheConfig: {},
+  dataFrom: {},
+  environment: {
+    required: true
+  },
+  query: {},
+  variables: {
+    type: Object,
+    default: function _default() {
+      return {};
+    }
+  }
+};
+
 var QueryRenderer = {
   name: 'relay-query-renderer',
-  props: {
-    cacheConfig: {},
-    dataFrom: {},
-    environment: {
-      required: true
-    },
-    query: {},
-    variables: {
-      type: Object,
-      default: function _default() {
-        return {};
-      }
-    }
-  },
+  props: props,
   data: function data() {
     var _this = this;
 
@@ -415,33 +417,44 @@ var QueryRenderer = {
         }
       }),
       state: Object.freeze(_extends({
-        prevPropsEnvironment: this.$props.environment,
-        prevPropsVariables: this.$props.variables,
-        prevQuery: this.$props.query,
+        prevPropsEnvironment: this.environment,
+        prevPropsVariables: this.variables,
+        prevQuery: this.query,
         queryFetcher: queryFetcher,
         retryCallbacks: retryCallbacks
       }, state))
     };
   },
-  beforeUpdate: function beforeUpdate() {
-    if (this.state.prevQuery !== this.query || this.state.prevPropsEnvironment !== this.environment || !areEqual(this.state.prevPropsVariables, this.variables)) {
-      var state = fetchQueryAndComputeStateFromProps(this.$props, this.state.queryFetcher, this.state.retryCallbacks);
-
-      // React getDerivedStateFromProps is static method.
-      // Vue beforeUpdate is instance method.
-      // Thus updaing relayContext here instead of in render.
-      this.context.relay.environment = state.relayContextEnvironment;
-      this.context.relay.variables = state.relayContextVariables;
 
-      this.setState(_extends({
-        prevQuery: this.query,
-        prevPropsEnvironment: this.environment,
-        prevPropsVariables: this.variables
-      }, state));
+  methods: {
+    setState: function setState(state) {
+      this.state = Object.freeze(_extends({}, this.state, state));
     }
   },
-  beforeDestroy: function beforeDestroy() {
-    this.state.queryFetcher.dispose();
+  watch: _extends({}, Object.keys(props).map(function (key) {
+    return defineProperty({}, key, function () {
+      if (this.state.prevQuery !== this.query || this.state.prevPropsEnvironment !== this.environment || !areEqual(this.state.prevPropsVariables, this.variables)) {
+        var state = fetchQueryAndComputeStateFromProps(this.$props, this.state.queryFetcher, this.state.retryCallbacks);
+
+        // React getDerivedStateFromProps is static method.
+        // Vue beforeUpdate is instance method.
+        // Thus updaing relayContext here instead of in render.
+        this.context.relay.environment = state.relayContextEnvironment;
+        this.context.relay.variables = state.relayContextVariables;
+
+        this.setState(_extends({
+          prevQuery: this.query,
+          prevPropsEnvironment: this.environment,
+          prevPropsVariables: this.variables
+        }, state));
+      }
+    });
+  })),
+  render: function render(h) {
+    {
+      require('relay-runtime/lib/deepFreeze')(this.state.renderProps);
+    }
+    return h(this.component);
   },
   created: function created() {
     var _this2 = this;
@@ -460,17 +473,8 @@ var QueryRenderer = {
       }
     };
   },
-  render: function render(h) {
-    {
-      require('relay-runtime/lib/deepFreeze')(this.state.renderProps);
-    }
-    return h(this.component);
-  },
-
-  methods: {
-    setState: function setState(state) {
-      this.state = Object.freeze(_extends({}, this.state, state));
-    }
+  beforeDestroy: function beforeDestroy() {
+    this.state.queryFetcher.dispose();
   }
 };
 
@@ -498,6 +502,11 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
   return {
     name: 'relay-context-consumer',
     inject: ['relay'],
+    render: function render(h) {
+      return h(this.component, {
+        props: this.$attrs
+      });
+    },
     created: function created() {
       var relay = assertRelayContext(this.relay);
       var getFragmentFromTag = relay.environment.unstable_internal.getFragment;
@@ -509,6 +518,12 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
       this.component = {
         extends: createContainerWithFragments.call(this, fragments),
         props: Object.keys(fragments),
+        render: function render(h) {
+          if (this.context) {
+            return h(this.component);
+          }
+          return this.component.render(h);
+        },
         created: function created() {
           var _this = this;
 
@@ -534,19 +549,8 @@ var buildVueRelayContainer = function buildVueRelayContainer(component, fragment
               })));
             }
           };
-        },
-        render: function render(h) {
-          if (this.context) {
-            return h(this.component);
-          }
-          return this.component.render(h);
         }
       };
-    },
-    render: function render(h) {
-      return h(this.component, {
-        props: this.$attrs
-      });
     }
   };
 };
@@ -587,47 +591,6 @@ var createContainerWithFragments = function createContainerWithFragments(fragmen
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
-
-
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$1(prevIDs, nextIDs)) {
-        this._release();
-
-        this.context.relay.environment = relay.environment;
-        this.context.relay.variables = relay.variables;
-
-        var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver: resolver
-        });
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props);
-      }
-      var data = this.state.resolver.resolve();
-      if (data !== this.state.data) {
-        this.setState({ data: data });
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      this._release();
-    },
 
     methods: {
       setState: function setState(state) {
@@ -746,6 +709,49 @@ var createContainerWithFragments = function createContainerWithFragments(fragmen
           this.state.queryFetcher.dispose();
         }
       }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
+
+
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
+
+        // If the environment has changed or props point to new records then
+        // previously fetched data and any pending fetches no longer apply:
+        // - Existing references are on the old environment.
+        // - Existing references are based on old variables.
+        // - Pending fetches are for the previous records.
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$1(prevIDs, nextIDs)) {
+          this._release();
+
+          this.context.relay.environment = relay.environment;
+          this.context.relay.variables = relay.variables;
+
+          var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+
+          this.setState({
+            prevProps: this.$props,
+            relayEnvironment: relay.environment,
+            relayVariables: relay.variables,
+            relayProp: this._buildRelayProp(relay),
+            localVariables: null,
+            resolver: resolver
+          });
+        } else if (!this.state.localVariables) {
+          this.state.resolver.setProps(this.$props);
+        }
+        var data = this.state.resolver.resolve();
+        if (data !== this.state.data) {
+          this.setState({ data: data });
+        }
+      });
+    })),
+    beforeDestroy: function beforeDestroy() {
+      this._release();
     }
   };
 };
@@ -873,47 +879,6 @@ var createContainerWithFragments$1 = function createContainerWithFragments(fragm
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
-
-
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$2(prevIDs, nextIDs)) {
-        this._release();
-
-        this.context.relay.environment = relay.environment;
-        this.context.relay.variables = relay.variables;
-
-        var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver: resolver
-        });
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props);
-      }
-      var data = this.state.resolver.resolve();
-      if (data !== this.state.data) {
-        this.setState({ data: data });
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      this._release();
-    },
 
     methods: {
       setState: function setState(state) {
@@ -1126,6 +1091,49 @@ var createContainerWithFragments$1 = function createContainerWithFragments(fragm
           this.state.queryFetcher.dispose();
         }
       }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
+
+
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
+
+        // If the environment has changed or props point to new records then
+        // previously fetched data and any pending fetches no longer apply:
+        // - Existing references are on the old environment.
+        // - Existing references are based on old variables.
+        // - Pending fetches are for the previous records.
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$2(prevIDs, nextIDs)) {
+          this._release();
+
+          this.context.relay.environment = relay.environment;
+          this.context.relay.variables = relay.variables;
+
+          var resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+
+          this.setState({
+            prevProps: this.$props,
+            relayEnvironment: relay.environment,
+            relayVariables: relay.variables,
+            relayProp: this._buildRelayProp(relay),
+            localVariables: null,
+            resolver: resolver
+          });
+        } else if (!this.state.localVariables) {
+          this.state.resolver.setProps(this.$props);
+        }
+        var data = this.state.resolver.resolve();
+        if (data !== this.state.data) {
+          this.setState({ data: data });
+        }
+      });
+    })),
+    beforeDestroy: function beforeDestroy() {
+      this._release();
     }
   };
 };
@@ -1173,67 +1181,69 @@ var createContainerWithFragments$2 = function createContainerWithFragments(fragm
         })
       };
     },
-    beforeUpdate: function beforeUpdate() {
-      var _relay$environment$un = relay.environment.unstable_internal,
-          createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
-          getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
 
+    methods: {
+      setState: function setState(state) {
+        this.state = Object.freeze(_extends({}, this.state, state));
+      },
+      _handleFragmentDataUpdate: function _handleFragmentDataUpdate() {
+        this.setState({
+          data: this.state.resolver.resolve(),
+          relayProp: {
+            isLoading: this.state.resolver.isLoading(),
+            environment: this.state.relayProp.environment
+          }
+        });
+      }
+    },
+    watch: _extends({}, Object.keys(fragments).map(function (key) {
+      return defineProperty({}, key, function () {
+        var _relay$environment$un = relay.environment.unstable_internal,
+            createFragmentSpecResolver = _relay$environment$un.createFragmentSpecResolver,
+            getDataIDsFromObject = _relay$environment$un.getDataIDsFromObject;
 
-      var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
-      var nextIDs = getDataIDsFromObject(fragments, this.$props);
 
-      var resolver = this.state.resolver;
+        var prevIDs = getDataIDsFromObject(fragments, this.state.prevProps);
+        var nextIDs = getDataIDsFromObject(fragments, this.$props);
 
-      if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$3(prevIDs, nextIDs)) {
-        resolver.dispose();
-        resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
+        var resolver = this.state.resolver;
 
-        this.setState({
-          data: resolver.resolve(),
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: {
-            isLoading: resolver.isLoading(),
-            environment: relay.environment
-          },
-          resolver: resolver
-        });
-      } else {
-        resolver.setProps(this.$props);
+        if (this.state.relayEnvironment !== relay.environment || this.state.relayVariables !== relay.variables || !areEqual$3(prevIDs, nextIDs)) {
+          resolver.dispose();
+          resolver = createFragmentSpecResolver(relay, this.$options.name, fragments, this.$props, this._handleFragmentDataUpdate);
 
-        var data = resolver.resolve();
-        if (data !== this.state.data) {
           this.setState({
-            data: data,
+            data: resolver.resolve(),
             prevProps: this.$props,
             relayEnvironment: relay.environment,
             relayVariables: relay.variables,
             relayProp: {
               isLoading: resolver.isLoading(),
               environment: relay.environment
-            }
+            },
+            resolver: resolver
           });
+        } else {
+          resolver.setProps(this.$props);
+
+          var data = resolver.resolve();
+          if (data !== this.state.data) {
+            this.setState({
+              data: data,
+              prevProps: this.$props,
+              relayEnvironment: relay.environment,
+              relayVariables: relay.variables,
+              relayProp: {
+                isLoading: resolver.isLoading(),
+                environment: relay.environment
+              }
+            });
+          }
         }
-      }
-    },
+      });
+    })),
     beforeDestroy: function beforeDestroy() {
       this.state.resolver.dispose();
-    },
-
-    methods: {
-      setState: function setState(state) {
-        this.state = Object.freeze(_extends({}, this.state, state));
-      },
-      _handleFragmentDataUpdate: function _handleFragmentDataUpdate() {
-        this.setState({
-          data: this.state.resolver.resolve(),
-          relayProp: {
-            isLoading: this.state.resolver.isLoading(),
-            environment: this.state.relayProp.environment
-          }
-        });
-      }
     }
   };
 };
diff --git a/dist/vue-relay.min.js b/dist/vue-relay.min.js
index 280750e..f2b2eab 100644
--- a/dist/vue-relay.min.js
+++ b/dist/vue-relay.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e["vue-relay"]=t()}(this,function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a=require("fbjs/lib/invariant"),i=function(){function e(){t(this,e),this._selectionReferences=[]}return n(e,[{key:"lookupInStore",value:function(e,t){return e.check(t.root)?(this._retainCachedOperation(e,t),e.lookup(t.fragment)):null}},{key:"execute",value:function(e){var t=this,n=e.environment,r=e.operation,a=e.cacheConfig,i=e.preservePreviousReferences,o=void 0!==i&&i,s=n.unstable_internal.createOperationSelector,l=[];return n.execute({operation:r,cacheConfig:a}).map(function(e){var t=s(r.node,e.variables,e.operation);return l.push(n.retain(t.root)),e}).do({error:function(){t._selectionReferences=t._selectionReferences.concat(l)},complete:function(){o||t._disposeSelectionReferences(),t._selectionReferences=t._selectionReferences.concat(l)},unsubscribe:function(){t._selectionReferences=t._selectionReferences.concat(l)}})}},{key:"fetch",value:function(e){var t=this,n=e.cacheConfig,r=e.environment,a=e.onDataChange,i=e.operation,o=!1,s=void 0;this._disposeRequest(),this._fetchOptions=e;var l=this.execute({environment:r,operation:i,cacheConfig:n}).finally(function(){t._pendingRequest=null}).subscribe({next:function(){t._onQueryDataAvailable({notifyFirstResult:o})},error:function(e){o?a({error:e}):s=e}});if(this._pendingRequest={dispose:function(){l.unsubscribe()}},o=!0,s)throw s;return this._snapshot}},{key:"retry",value:function(){return a(this._fetchOptions,"RelayQueryFetcher: `retry` should be called after having called `fetch`"),this.fetch(this._fetchOptions)}},{key:"dispose",value:function(){this._disposeRequest(),this._disposeSelectionReferences()}},{key:"_disposeRequest",value:function(){this._snapshot=null,this._pendingRequest&&this._pendingRequest.dispose(),this._rootSubscription&&(this._rootSubscription.dispose(),this._rootSubscription=null)}},{key:"_retainCachedOperation",value:function(e,t){this._disposeCacheSelectionReference(),this._cacheSelectionReference=e.retain(t.root)}},{key:"_disposeCacheSelectionReference",value:function(){this._cacheSelectionReference&&this._cacheSelectionReference.dispose(),this._cacheSelectionReference=null}},{key:"_disposeSelectionReferences",value:function(){this._disposeCacheSelectionReference(),this._selectionReferences.forEach(function(e){return e.dispose()}),this._selectionReferences=[]}},{key:"_onQueryDataAvailable",value:function(e){var t=e.notifyFirstResult;a(this._fetchOptions,"RelayQueryFetcher: `_onQueryDataAvailable` should have been called after having called `fetch`");var n=this._fetchOptions,r=n.environment,i=n.onDataChange,o=n.operation;this._snapshot||(this._snapshot=r.lookup(o.fragment),this._rootSubscription=r.subscribe(this._snapshot,function(e){return i({snapshot:e})}),this._snapshot&&t&&i({snapshot:this._snapshot}))}}]),e}(),o=require("fbjs/lib/areEqual"),s=function(e,t,n,r){return{error:e,props:t?t.data:null,retry:function(){var t=n.retry();t?r.handleDataChange({snapshot:t}):e&&r.handleRetryAfterError(e)}}},l=function(e,t,n){var r=e.environment,a=e.query,i=e.variables;if(!a)return t.dispose(),{relayContextEnvironment:r,relayContextVariables:i,renderProps:{error:null,props:{},retry:null}};var o=r,l=o.unstable_internal,c=(0,l.createOperationSelector)((0,l.getRequest)(a),i);try{var u="STORE_THEN_NETWORK"===e.dataFrom?t.lookupInStore(o,c):null,h=t.fetch({cacheConfig:e.cacheConfig,dataFrom:e.dataFrom,environment:o,onDataChange:n.handleDataChange,operation:c})||u;return h?{relayContextEnvironment:r,relayContextVariables:c.variables,renderProps:s(null,h,t,n)}:{relayContextEnvironment:r,relayContextVariables:c.variables,renderProps:{error:null,props:null,retry:null}}}catch(e){return{relayContextEnvironment:r,relayContextVariables:c.variables,renderProps:s(e,null,t,n)}}},c={name:"relay-query-renderer",props:{cacheConfig:{},dataFrom:{},environment:{required:!0},query:{},variables:{type:Object,default:function(){return{}}}},data:function(){var e=this,t={handleDataChange:function(r){var a=r.error,i=r.snapshot;e.setState({renderProps:s(a,i,n,t)})},handleRetryAfterError:function(t){e.setState({renderProps:{error:null,props:null,retry:null}})}},n=new i,a=l(this.$props,n,t);return{context:Object.freeze({relay:{environment:a.relayContextEnvironment,variables:a.relayContextVariables}}),state:Object.freeze(r({prevPropsEnvironment:this.$props.environment,prevPropsVariables:this.$props.variables,prevQuery:this.$props.query,queryFetcher:n,retryCallbacks:t},a))}},beforeUpdate:function(){if(this.state.prevQuery!==this.query||this.state.prevPropsEnvironment!==this.environment||!o(this.state.prevPropsVariables,this.variables)){var e=l(this.$props,this.state.queryFetcher,this.state.retryCallbacks);this.context.relay.environment=e.relayContextEnvironment,this.context.relay.variables=e.relayContextVariables,this.setState(r({prevQuery:this.query,prevPropsEnvironment:this.environment,prevPropsVariables:this.variables},e))}},beforeDestroy:function(){this.state.queryFetcher.dispose()},created:function(){var e=this;this.component={name:"relay-context-provider",provide:{relay:this.context.relay},render:function(t){return t("keep-alive",{props:{include:[]}},e.$scopedSlots.default(e.state.renderProps))}}},render:function(e){return e(this.component)},methods:{setState:function(e){this.state=Object.freeze(r({},this.state,e))}}},u=function(t){return"object"===(void 0===t?"undefined":e(t))&&null!==t&&!Array.isArray(t)&&("object"===(void 0===(r=t.environment)?"undefined":e(r))&&null!==r&&"function"==typeof r.applyMutation&&"function"==typeof r.check&&"function"==typeof r.check&&"function"==typeof r.lookup&&"function"==typeof r.retain&&"function"==typeof r.sendMutation&&"function"==typeof r.sendQuery&&"function"==typeof r.execute&&"function"==typeof r.subscribe)&&("object"===(void 0===(n=t.variables)?"undefined":e(n))&&null!==n&&!Array.isArray(n));var n,r},h=require("fbjs/lib/invariant"),p=require("fbjs/lib/mapObject"),f=function(e,t,n){return{name:"relay-context-consumer",inject:["relay"],created:function(){var a=function(e){return h(u(e),"RelayContextConsumer: Expected `relayContext` to be an object conforming to the `RelayContext` interface, got `%s`.",e),e}(this.relay).environment.unstable_internal.getFragment,i=p(t,a),o=this;this.component={extends:n.call(this,i),props:Object.keys(i),created:function(){var t=this;this.component={name:"relay-context-provider",provide:{relay:(this.context||o).relay},render:function(n){return null!=e?n(e,{props:r({},t.$attrs,t.state.data,{relay:t.state.relayProp})}):n("keep-alive",{props:{include:[]}},o.$scopedSlots.default(r({},t.state.data,{relay:t.state.relayProp})))}}},render:function(e){return this.context?e(this.component):this.component.render(e)}}},render:function(e){return e(this.component,{props:this.$attrs})}}},v=require("fbjs/lib/areEqual"),b=require("fbjs/lib/invariant"),y=require("relay-runtime").Observable,d=require("fbjs/lib/areEqual"),m=require("fbjs/lib/invariant"),g=require("fbjs/lib/warning"),_=require("relay-runtime"),S=_.ConnectionInterface,R=_.Observable,C=function(e){var t=e.count;return m(t,"RelayPaginationContainer: Unable to synthesize a getFragmentVariables function."),function(e,n){return r({},e,(o=n,(i=t)in(a={})?Object.defineProperty(a,i,{value:o,enumerable:!0,configurable:!0,writable:!0}):a[i]=o,a));var a,i,o}},P=function(e){return"function"==typeof e?{error:e,complete:e,unsubscribe:function(t){"function"==typeof e&&e()}}:e||{}},F=function(t,n){var a=this.relay,o=function(e){var t=null,n=!1;for(var a in e){var i=e[a],o=i.metadata&&i.metadata.connection;void 0!==i.metadata&&(n=!0),o&&(m(1===o.length,"RelayPaginationContainer: Only a single @connection is supported, `%s` has %s.",a,o.length),m(!t,"RelayPaginationContainer: Only a single fragment with @connection is supported."),t=r({},o[0],{fragmentName:a}))}return m(!n||null!==t,"RelayPaginationContainer: A @connection directive must be present."),t||{}}(t),s=n.getConnectionFromProps||function(t){var n=t.path;return m(n,"RelayPaginationContainer: Unable to synthesize a getConnectionFromProps function."),function(r){for(var a=r[t.fragmentName],i=0;i<n.length;i++){if(!a||"object"!==(void 0===a?"undefined":e(a)))return null;a=a[n[i]]}return a}}(o),l=n.direction||o.direction;m(l,"RelayPaginationContainer: Unable to infer direction of the connection, possibly because both first and last are provided.");var c=n.getFragmentVariables||C(o);return{name:"relay-pagination-container",data:function(){var e=(0,a.environment.unstable_internal.createFragmentSpecResolver)(a,this.$options.name,t,this.$props,this._handleFragmentDataUpdate);return{context:Object.freeze({relay:{environment:a.environment,variables:a.variables}}),state:Object.freeze({data:e.resolve(),prevProps:this.$props,relayEnvironment:a.environment,relayVariables:a.variables,relayProp:this._buildRelayProp(a),isARequestInFlight:!1,localVariables:null,refetchSubscription:null,resolver:e})}},beforeUpdate:function(){var e=a.environment.unstable_internal,n=e.createFragmentSpecResolver,r=e.getDataIDsFromObject,i=r(t,this.state.prevProps),o=r(t,this.$props);if(this.state.relayEnvironment===a.environment&&this.state.relayVariables===a.variables&&d(i,o))this.state.localVariables||this.state.resolver.setProps(this.$props);else{this._release(),this.context.relay.environment=a.environment,this.context.relay.variables=a.variables;var s=n(a,this.$options.name,t,this.$props,this._handleFragmentDataUpdate);this.setState({prevProps:this.$props,relayEnvironment:a.environment,relayVariables:a.variables,relayProp:this._buildRelayProp(a),localVariables:null,resolver:s})}var l=this.state.resolver.resolve();l!==this.state.data&&this.setState({data:l})},beforeDestroy:function(){this._release()},methods:{setState:function(e){this.state=Object.freeze(r({},this.state,e))},_buildRelayProp:function(e){return{hasMore:this._hasMore,isLoading:this._isLoading,loadMore:this._loadMore,refetchConnection:this._refetchConnection,environment:e.environment}},_handleFragmentDataUpdate:function(){this.setState({data:this.state.resolver.resolve()})},_getConnectionData:function(){var t=r({},this.$props,this.state.data),n=s(t);if(null==n)return null;var a=S.get(),i=a.EDGES,o=a.PAGE_INFO,c=a.HAS_NEXT_PAGE,u=a.HAS_PREV_PAGE,h=a.END_CURSOR,p=a.START_CURSOR;m("object"===(void 0===n?"undefined":e(n)),"RelayPaginationContainer: Expected `getConnectionFromProps()` in `%s`to return `null` or a plain object with %s and %s properties, got `%s`.",this.$options.name,i,o,n);var f=n[i],v=n[o];if(null==f||null==v)return null;m(Array.isArray(f),"RelayPaginationContainer: Expected `getConnectionFromProps()` in `%s`to return an object with %s: Array, got `%s`.",this.$options.name,i,f),m("object"===(void 0===v?"undefined":e(v)),"RelayPaginationContainer: Expected `getConnectionFromProps()` in `%s`to return an object with %s: Object, got `%s`.",this.$options.name,o,v);var b="forward"===l?v[c]:v[u],y="forward"===l?v[h]:v[p];return"boolean"!=typeof b||0!==f.length&&void 0===y?(g(!1,"RelayPaginationContainer: Cannot paginate without %s fields in `%s`. Be sure to fetch %s (got `%s`) and %s (got `%s`).",o,this.$options.name,"forward"===l?c:u,b,"forward"===l?h:p,y),null):{cursor:y,edgeCount:f.length,hasMore:b}},_hasMore:function(){var e=this._getConnectionData();return!!(e&&e.hasMore&&e.cursor)},_isLoading:function(){return!!this.state.refetchSubscription},_refetchConnection:function(e,t,n){var r={count:e,cursor:null,totalCount:e};return{dispose:this._fetchPage(r,P(t),{force:!0},n).unsubscribe}},_loadMore:function(e,t,n){var r=P(t),a=this._getConnectionData();if(!a)return R.create(function(e){return e.complete()}).subscribe(r),null;var i=a.edgeCount+e;if(n&&n.force)return this._refetchConnection(i,t);var o=S.get(),s=o.END_CURSOR,c=o.START_CURSOR,u=a.cursor;g(u,"RelayPaginationContainer: Cannot `loadMore` without valid `%s` (got `%s`)","forward"===l?s:c,u);var h={count:e,cursor:u,totalCount:i};return{dispose:this._fetchPage(h,r,n).unsubscribe}},_getQueryFetcher:function(){return this.state.queryFetcher||this.setState({queryFetcher:new i}),this.state.queryFetcher},_fetchPage:function(i,o,s,l){var u=this,h=a.environment,p=h.unstable_internal,f=p.createOperationSelector,v=p.getRequest,b=p.getVariablesFromObject,y=r({},this.$props,this.state.data),g=b(this.context.relay.variables,t,this.$props);g=r({},g,l);var _=n.getVariables(y,{count:i.count,cursor:i.cursor},g);m("object"===(void 0===_?"undefined":e(_))&&null!==_,"RelayPaginationContainer: Expected `getVariables()` to return an object, got `%s` in `%s`.",_,this.$options.name),_=r({},_,l),this.setState({localVariables:_});var S=s?{force:!!s.force}:void 0;S&&s&&s.rerunParamExperimental&&(S.rerunParamExperimental=s.rerunParamExperimental);var C=f(v(n.query),_);this.state.refetchSubscription&&this.state.refetchSubscription.unsubscribe();var P=function(){u.state.refetchSubscription===F&&(u.state.refetchSubscription.unsubscribe(),u.setState({refetchSubscription:null,isARequestInFlight:!1}))};this.setState({isARequestInFlight:!0});var F=this._getQueryFetcher().execute({environment:h,operation:C,cacheConfig:S,preservePreviousReferences:!0}).mergeMap(function(e){return R.create(function(e){!function(e,t){u.context.relay.environment=a.environment,u.context.relay.variables=r({},a.variables,g);var n=u.state.resolver.resolve();u.state.resolver.setVariables(c(g,i.totalCount));var o=u.state.resolver.resolve();d(n,o)||u.setState({data:o}),t()}(0,function(){e.next(),e.complete()})})}).do({error:P,complete:P,unsubscribe:P}).subscribe(o||{});return this.setState({refetchSubscription:this.state.isARequestInFlight?F:null}),F},_release:function(){this.state.resolver.dispose(),this.state.refetchSubscription&&(this.state.refetchSubscription.unsubscribe(),this.setState({refetchSubscription:null,isARequestInFlight:!1})),this.state.queryFetcher&&this.state.queryFetcher.dispose()}}}},x=require("fbjs/lib/areEqual"),q=require("fbjs/lib/invariant"),E=function(e){var t=this.relay;return{name:"relay-fragment-container",data:function(){var n=(0,t.environment.unstable_internal.createFragmentSpecResolver)(t,this.$options.name,e,this.$props,this._handleFragmentDataUpdate);return{state:Object.freeze({data:n.resolve(),prevProps:this.$props,relayEnvironment:t.environment,relayVariables:t.variables,relayProp:{isLoading:n.isLoading(),environment:t.environment},resolver:n})}},beforeUpdate:function(){var n=t.environment.unstable_internal,r=n.createFragmentSpecResolver,a=n.getDataIDsFromObject,i=a(e,this.state.prevProps),o=a(e,this.$props),s=this.state.resolver;if(this.state.relayEnvironment===t.environment&&this.state.relayVariables===t.variables&&x(i,o)){s.setProps(this.$props);var l=s.resolve();l!==this.state.data&&this.setState({data:l,prevProps:this.$props,relayEnvironment:t.environment,relayVariables:t.variables,relayProp:{isLoading:s.isLoading(),environment:t.environment}})}else s.dispose(),s=r(t,this.$options.name,e,this.$props,this._handleFragmentDataUpdate),this.setState({data:s.resolve(),prevProps:this.$props,relayEnvironment:t.environment,relayVariables:t.variables,relayProp:{isLoading:s.isLoading(),environment:t.environment},resolver:s})},beforeDestroy:function(){this.state.resolver.dispose()},methods:{setState:function(e){this.state=Object.freeze(r({},this.state,e))},_handleFragmentDataUpdate:function(){this.setState({data:this.state.resolver.resolve(),relayProp:{isLoading:this.state.resolver.isLoading(),environment:this.state.relayProp.environment}})}}}},j=require("relay-runtime");return{QueryRenderer:c,MutationTypes:j.MutationTypes,RangeOperations:j.RangeOperations,commitLocalUpdate:j.commitLocalUpdate,commitMutation:j.commitMutation,createRefetchContainer:function(){b(2===arguments.length||3===arguments.length,"createRefetchContainer: Expected `arguments.length` to be 2 or 3, got `%s`.",arguments),2===arguments.length&&[].unshift.call(arguments,null);var e=Array.prototype.slice.call(arguments),t=e[0],n=e[1],a=e[2];return f(t,n,function(e){return function(e,t){var n=this.relay;return{name:"relay-refetch-container",data:function(){var t=(0,n.environment.unstable_internal.createFragmentSpecResolver)(n,this.$options.name,e,this.$props,this._handleFragmentDataUpdate);return{context:Object.freeze({relay:{environment:n.environment,variables:n.variables}}),state:Object.freeze({data:t.resolve(),prevProps:this.$props,relayEnvironment:n.environment,relayVariables:n.variables,relayProp:this._buildRelayProp(n),localVariables:null,refetchSubscription:null,resolver:t})}},beforeUpdate:function(){var t=n.environment.unstable_internal,r=t.createFragmentSpecResolver,a=t.getDataIDsFromObject,i=a(e,this.state.prevProps),o=a(e,this.$props);if(this.state.relayEnvironment===n.environment&&this.state.relayVariables===n.variables&&v(i,o))this.state.localVariables||this.state.resolver.setProps(this.$props);else{this._release(),this.context.relay.environment=n.environment,this.context.relay.variables=n.variables;var s=r(n,this.$options.name,e,this.$props,this._handleFragmentDataUpdate);this.setState({prevProps:this.$props,relayEnvironment:n.environment,relayVariables:n.variables,relayProp:this._buildRelayProp(n),localVariables:null,resolver:s})}var l=this.state.resolver.resolve();l!==this.state.data&&this.setState({data:l})},beforeDestroy:function(){this._release()},methods:{setState:function(e){this.state=Object.freeze(r({},this.state,e))},_buildRelayProp:function(e){return{environment:e.environment,refetch:this._refetch}},_handleFragmentDataUpdate:function(){this.setState({data:this.state.resolver.resolve()})},_getFragmentVariables:function(){return(0,n.environment.unstable_internal.getVariablesFromObject)(n.variables,e,this.$props)},_getQueryFetcher:function(){return this.state.queryFetcher||this.setState({queryFetcher:new i}),this.state.queryFetcher},_refetch:function(e,a,i,o){var s=this,l=n.environment,c=n.variables,u=l.unstable_internal,h=u.createOperationSelector,p=u.getRequest,f="function"==typeof e?e(this._getFragmentVariables()):e;f=r({},c,f);var v=a?r({},c,a):f;this.setState({localVariables:f});var b=o?{force:!!o.force}:void 0,d="function"==typeof i?{next:i,error:i}:i||{},m=h(p(t),f);this.state.refetchSubscription&&this.state.refetchSubscription.unsubscribe();var g=void 0;return this._getQueryFetcher().execute({environment:l,operation:m,cacheConfig:b,preservePreviousReferences:!0}).mergeMap(function(e){return s.context.relay.environment=n.environment,s.context.relay.variables=v,s.state.resolver.setVariables(v),y.create(function(e){s.setState({data:s.state.resolver.resolve()}),e.next(),e.complete()})}).finally(function(){s.state.refetchSubscription===g&&(s.state.refetchSubscription.unsubscribe(),s.setState({refetchSubscription:null}))}).subscribe(r({},d,{start:function(e){g=e,s.setState({refetchSubscription:e}),d.start&&d.start(e)}})),{dispose:function(){g&&g.unsubscribe()}}},_release:function(){this.state.resolver.dispose(),this.state.references.forEach(function(e){return e.dispose()}),this.state.references.length=0,this.state.refetchSubscription&&(this.state.refetchSubscription.unsubscribe(),this.setState({refetchSubscription:null})),this.state.queryFetcher&&this.state.queryFetcher.dispose()}}}}.call(this,e,a)})},createPaginationContainer:function(){m(2===arguments.length||3===arguments.length,"createPaginationContainer: Expected `arguments.length` to be 2 or 3, got `%s`.",arguments),2===arguments.length&&[].unshift.call(arguments,null);var e=Array.prototype.slice.call(arguments),t=e[0],n=e[1],r=e[2];return f(t,n,function(e){return F.call(this,e,r)})},createFragmentContainer:function(){q(1===arguments.length||2===arguments.length,"createFragmentContainer: Expected `arguments.length` to be 1 or 2, got `%s`.",arguments),1===arguments.length&&[].unshift.call(arguments,null);var e=Array.prototype.slice.call(arguments),t=e[0],n=e[1];return f(t,n,E)},fetchQuery:j.fetchQuery,graphql:j.graphql,requestSubscription:j.requestSubscription}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e["vue-relay"]=t()}(this,function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),r=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=require("fbjs/lib/invariant"),o=function(){function e(){t(this,e),this._selectionReferences=[]}return n(e,[{key:"lookupInStore",value:function(e,t){return e.check(t.root)?(this._retainCachedOperation(e,t),e.lookup(t.fragment)):null}},{key:"execute",value:function(e){var t=this,n=e.environment,r=e.operation,a=e.cacheConfig,i=e.preservePreviousReferences,o=void 0!==i&&i,s=n.unstable_internal.createOperationSelector,l=[];return n.execute({operation:r,cacheConfig:a}).map(function(e){var t=s(r.node,e.variables,e.operation);return l.push(n.retain(t.root)),e}).do({error:function(){t._selectionReferences=t._selectionReferences.concat(l)},complete:function(){o||t._disposeSelectionReferences(),t._selectionReferences=t._selectionReferences.concat(l)},unsubscribe:function(){t._selectionReferences=t._selectionReferences.concat(l)}})}},{key:"fetch",value:function(e){var t=this,n=e.cacheConfig,r=e.environment,a=e.onDataChange,i=e.operation,o=!1,s=void 0;this._disposeRequest(),this._fetchOptions=e;var l=this.execute({environment:r,operation:i,cacheConfig:n}).finally(function(){t._pendingRequest=null}).subscribe({next:function(){t._onQueryDataAvailable({notifyFirstResult:o})},error:function(e){o?a({error:e}):s=e}});if(this._pendingRequest={dispose:function(){l.unsubscribe()}},o=!0,s)throw s;return this._snapshot}},{key:"retry",value:function(){return i(this._fetchOptions,"RelayQueryFetcher: `retry` should be called after having called `fetch`"),this.fetch(this._fetchOptions)}},{key:"dispose",value:function(){this._disposeRequest(),this._disposeSelectionReferences()}},{key:"_disposeRequest",value:function(){this._snapshot=null,this._pendingRequest&&this._pendingRequest.dispose(),this._rootSubscription&&(this._rootSubscription.dispose(),this._rootSubscription=null)}},{key:"_retainCachedOperation",value:function(e,t){this._disposeCacheSelectionReference(),this._cacheSelectionReference=e.retain(t.root)}},{key:"_disposeCacheSelectionReference",value:function(){this._cacheSelectionReference&&this._cacheSelectionReference.dispose(),this._cacheSelectionReference=null}},{key:"_disposeSelectionReferences",value:function(){this._disposeCacheSelectionReference(),this._selectionReferences.forEach(function(e){return e.dispose()}),this._selectionReferences=[]}},{key:"_onQueryDataAvailable",value:function(e){var t=e.notifyFirstResult;i(this._fetchOptions,"RelayQueryFetcher: `_onQueryDataAvailable` should have been called after having called `fetch`");var n=this._fetchOptions,r=n.environment,a=n.onDataChange,o=n.operation;this._snapshot||(this._snapshot=r.lookup(o.fragment),this._rootSubscription=r.subscribe(this._snapshot,function(e){return a({snapshot:e})}),this._snapshot&&t&&a({snapshot:this._snapshot}))}}]),e}(),s=require("fbjs/lib/areEqual"),l=function(e,t,n,r){return{error:e,props:t?t.data:null,retry:function(){var t=n.retry();t?r.handleDataChange({snapshot:t}):e&&r.handleRetryAfterError(e)}}},c=function(e,t,n){var r=e.environment,a=e.query,i=e.variables;if(!a)return t.dispose(),{relayContextEnvironment:r,relayContextVariables:i,renderProps:{error:null,props:{},retry:null}};var o=r,s=o.unstable_internal,c=(0,s.createOperationSelector)((0,s.getRequest)(a),i);try{var u="STORE_THEN_NETWORK"===e.dataFrom?t.lookupInStore(o,c):null,h=t.fetch({cacheConfig:e.cacheConfig,dataFrom:e.dataFrom,environment:o,onDataChange:n.handleDataChange,operation:c})||u;return h?{relayContextEnvironment:r,relayContextVariables:c.variables,renderProps:l(null,h,t,n)}:{relayContextEnvironment:r,relayContextVariables:c.variables,renderProps:{error:null,props:null,retry:null}}}catch(e){return{relayContextEnvironment:r,relayContextVariables:c.variables,renderProps:l(e,null,t,n)}}},u={cacheConfig:{},dataFrom:{},environment:{required:!0},query:{},variables:{type:Object,default:function(){return{}}}},h={name:"relay-query-renderer",props:u,data:function(){var e=this,t={handleDataChange:function(r){var a=r.error,i=r.snapshot;e.setState({renderProps:l(a,i,n,t)})},handleRetryAfterError:function(t){e.setState({renderProps:{error:null,props:null,retry:null}})}},n=new o,r=c(this.$props,n,t);return{context:Object.freeze({relay:{environment:r.relayContextEnvironment,variables:r.relayContextVariables}}),state:Object.freeze(a({prevPropsEnvironment:this.environment,prevPropsVariables:this.variables,prevQuery:this.query,queryFetcher:n,retryCallbacks:t},r))}},methods:{setState:function(e){this.state=Object.freeze(a({},this.state,e))}},watch:a({},Object.keys(u).map(function(e){return r({},e,function(){if(this.state.prevQuery!==this.query||this.state.prevPropsEnvironment!==this.environment||!s(this.state.prevPropsVariables,this.variables)){var e=c(this.$props,this.state.queryFetcher,this.state.retryCallbacks);this.context.relay.environment=e.relayContextEnvironment,this.context.relay.variables=e.relayContextVariables,this.setState(a({prevQuery:this.query,prevPropsEnvironment:this.environment,prevPropsVariables:this.variables},e))}})})),render:function(e){return e(this.component)},created:function(){var e=this;this.component={name:"relay-context-provider",provide:{relay:this.context.relay},render:function(t){return t("keep-alive",{props:{include:[]}},e.$scopedSlots.default(e.state.renderProps))}}},beforeDestroy:function(){this.state.queryFetcher.dispose()}},p=function(t){return"object"===(void 0===t?"undefined":e(t))&&null!==t&&!Array.isArray(t)&&("object"===(void 0===(r=t.environment)?"undefined":e(r))&&null!==r&&"function"==typeof r.applyMutation&&"function"==typeof r.check&&"function"==typeof r.check&&"function"==typeof r.lookup&&"function"==typeof r.retain&&"function"==typeof r.sendMutation&&"function"==typeof r.sendQuery&&"function"==typeof r.execute&&"function"==typeof r.subscribe)&&("object"===(void 0===(n=t.variables)?"undefined":e(n))&&null!==n&&!Array.isArray(n));var n,r},f=require("fbjs/lib/invariant"),v=require("fbjs/lib/mapObject"),b=function(e,t,n){return{name:"relay-context-consumer",inject:["relay"],render:function(e){return e(this.component,{props:this.$attrs})},created:function(){var r=function(e){return f(p(e),"RelayContextConsumer: Expected `relayContext` to be an object conforming to the `RelayContext` interface, got `%s`.",e),e}(this.relay).environment.unstable_internal.getFragment,i=v(t,r),o=this;this.component={extends:n.call(this,i),props:Object.keys(i),render:function(e){return this.context?e(this.component):this.component.render(e)},created:function(){var t=this;this.component={name:"relay-context-provider",provide:{relay:(this.context||o).relay},render:function(n){return null!=e?n(e,{props:a({},t.$attrs,t.state.data,{relay:t.state.relayProp})}):n("keep-alive",{props:{include:[]}},o.$scopedSlots.default(a({},t.state.data,{relay:t.state.relayProp})))}}}}}}},y=require("fbjs/lib/areEqual"),d=require("fbjs/lib/invariant"),m=require("relay-runtime").Observable,g=require("fbjs/lib/areEqual"),_=require("fbjs/lib/invariant"),S=require("fbjs/lib/warning"),R=require("relay-runtime"),C=R.ConnectionInterface,P=R.Observable,F=function(e){return"function"==typeof e?{error:e,complete:e,unsubscribe:function(t){"function"==typeof e&&e()}}:e||{}},x=function(t,n){var i=this.relay,s=function(e){var t=null,n=!1;for(var r in e){var i=e[r],o=i.metadata&&i.metadata.connection;void 0!==i.metadata&&(n=!0),o&&(_(1===o.length,"RelayPaginationContainer: Only a single @connection is supported, `%s` has %s.",r,o.length),_(!t,"RelayPaginationContainer: Only a single fragment with @connection is supported."),t=a({},o[0],{fragmentName:r}))}return _(!n||null!==t,"RelayPaginationContainer: A @connection directive must be present."),t||{}}(t),l=n.getConnectionFromProps||function(t){var n=t.path;return _(n,"RelayPaginationContainer: Unable to synthesize a getConnectionFromProps function."),function(r){for(var a=r[t.fragmentName],i=0;i<n.length;i++){if(!a||"object"!==(void 0===a?"undefined":e(a)))return null;a=a[n[i]]}return a}}(s),c=n.direction||s.direction;_(c,"RelayPaginationContainer: Unable to infer direction of the connection, possibly because both first and last are provided.");var u=n.getFragmentVariables||function(e){var t=e.count;return _(t,"RelayPaginationContainer: Unable to synthesize a getFragmentVariables function."),function(e,n){return a({},e,r({},t,n))}}(s);return{name:"relay-pagination-container",data:function(){var e=(0,i.environment.unstable_internal.createFragmentSpecResolver)(i,this.$options.name,t,this.$props,this._handleFragmentDataUpdate);return{context:Object.freeze({relay:{environment:i.environment,variables:i.variables}}),state:Object.freeze({data:e.resolve(),prevProps:this.$props,relayEnvironment:i.environment,relayVariables:i.variables,relayProp:this._buildRelayProp(i),isARequestInFlight:!1,localVariables:null,refetchSubscription:null,resolver:e})}},methods:{setState:function(e){this.state=Object.freeze(a({},this.state,e))},_buildRelayProp:function(e){return{hasMore:this._hasMore,isLoading:this._isLoading,loadMore:this._loadMore,refetchConnection:this._refetchConnection,environment:e.environment}},_handleFragmentDataUpdate:function(){this.setState({data:this.state.resolver.resolve()})},_getConnectionData:function(){var t=a({},this.$props,this.state.data),n=l(t);if(null==n)return null;var r=C.get(),i=r.EDGES,o=r.PAGE_INFO,s=r.HAS_NEXT_PAGE,u=r.HAS_PREV_PAGE,h=r.END_CURSOR,p=r.START_CURSOR;_("object"===(void 0===n?"undefined":e(n)),"RelayPaginationContainer: Expected `getConnectionFromProps()` in `%s`to return `null` or a plain object with %s and %s properties, got `%s`.",this.$options.name,i,o,n);var f=n[i],v=n[o];if(null==f||null==v)return null;_(Array.isArray(f),"RelayPaginationContainer: Expected `getConnectionFromProps()` in `%s`to return an object with %s: Array, got `%s`.",this.$options.name,i,f),_("object"===(void 0===v?"undefined":e(v)),"RelayPaginationContainer: Expected `getConnectionFromProps()` in `%s`to return an object with %s: Object, got `%s`.",this.$options.name,o,v);var b="forward"===c?v[s]:v[u],y="forward"===c?v[h]:v[p];return"boolean"!=typeof b||0!==f.length&&void 0===y?(S(!1,"RelayPaginationContainer: Cannot paginate without %s fields in `%s`. Be sure to fetch %s (got `%s`) and %s (got `%s`).",o,this.$options.name,"forward"===c?s:u,b,"forward"===c?h:p,y),null):{cursor:y,edgeCount:f.length,hasMore:b}},_hasMore:function(){var e=this._getConnectionData();return!!(e&&e.hasMore&&e.cursor)},_isLoading:function(){return!!this.state.refetchSubscription},_refetchConnection:function(e,t,n){var r={count:e,cursor:null,totalCount:e};return{dispose:this._fetchPage(r,F(t),{force:!0},n).unsubscribe}},_loadMore:function(e,t,n){var r=F(t),a=this._getConnectionData();if(!a)return P.create(function(e){return e.complete()}).subscribe(r),null;var i=a.edgeCount+e;if(n&&n.force)return this._refetchConnection(i,t);var o=C.get(),s=o.END_CURSOR,l=o.START_CURSOR,u=a.cursor;S(u,"RelayPaginationContainer: Cannot `loadMore` without valid `%s` (got `%s`)","forward"===c?s:l,u);var h={count:e,cursor:u,totalCount:i};return{dispose:this._fetchPage(h,r,n).unsubscribe}},_getQueryFetcher:function(){return this.state.queryFetcher||this.setState({queryFetcher:new o}),this.state.queryFetcher},_fetchPage:function(r,o,s,l){var c=this,h=i.environment,p=h.unstable_internal,f=p.createOperationSelector,v=p.getRequest,b=p.getVariablesFromObject,y=a({},this.$props,this.state.data),d=b(this.context.relay.variables,t,this.$props);d=a({},d,l);var m=n.getVariables(y,{count:r.count,cursor:r.cursor},d);_("object"===(void 0===m?"undefined":e(m))&&null!==m,"RelayPaginationContainer: Expected `getVariables()` to return an object, got `%s` in `%s`.",m,this.$options.name),m=a({},m,l),this.setState({localVariables:m});var S=s?{force:!!s.force}:void 0;S&&s&&s.rerunParamExperimental&&(S.rerunParamExperimental=s.rerunParamExperimental);var R=f(v(n.query),m);this.state.refetchSubscription&&this.state.refetchSubscription.unsubscribe();var C=function(){c.state.refetchSubscription===F&&(c.state.refetchSubscription.unsubscribe(),c.setState({refetchSubscription:null,isARequestInFlight:!1}))};this.setState({isARequestInFlight:!0});var F=this._getQueryFetcher().execute({environment:h,operation:R,cacheConfig:S,preservePreviousReferences:!0}).mergeMap(function(e){return P.create(function(e){!function(e,t){c.context.relay.environment=i.environment,c.context.relay.variables=a({},i.variables,d);var n=c.state.resolver.resolve();c.state.resolver.setVariables(u(d,r.totalCount));var o=c.state.resolver.resolve();g(n,o)||c.setState({data:o}),t()}(0,function(){e.next(),e.complete()})})}).do({error:C,complete:C,unsubscribe:C}).subscribe(o||{});return this.setState({refetchSubscription:this.state.isARequestInFlight?F:null}),F},_release:function(){this.state.resolver.dispose(),this.state.refetchSubscription&&(this.state.refetchSubscription.unsubscribe(),this.setState({refetchSubscription:null,isARequestInFlight:!1})),this.state.queryFetcher&&this.state.queryFetcher.dispose()}},watch:a({},Object.keys(t).map(function(e){return r({},e,function(){var e=i.environment.unstable_internal,n=e.createFragmentSpecResolver,r=e.getDataIDsFromObject,a=r(t,this.state.prevProps),o=r(t,this.$props);if(this.state.relayEnvironment===i.environment&&this.state.relayVariables===i.variables&&g(a,o))this.state.localVariables||this.state.resolver.setProps(this.$props);else{this._release(),this.context.relay.environment=i.environment,this.context.relay.variables=i.variables;var s=n(i,this.$options.name,t,this.$props,this._handleFragmentDataUpdate);this.setState({prevProps:this.$props,relayEnvironment:i.environment,relayVariables:i.variables,relayProp:this._buildRelayProp(i),localVariables:null,resolver:s})}var l=this.state.resolver.resolve();l!==this.state.data&&this.setState({data:l})})})),beforeDestroy:function(){this._release()}}},q=require("fbjs/lib/areEqual"),j=require("fbjs/lib/invariant"),O=function(e){var t=this.relay;return{name:"relay-fragment-container",data:function(){var n=(0,t.environment.unstable_internal.createFragmentSpecResolver)(t,this.$options.name,e,this.$props,this._handleFragmentDataUpdate);return{state:Object.freeze({data:n.resolve(),prevProps:this.$props,relayEnvironment:t.environment,relayVariables:t.variables,relayProp:{isLoading:n.isLoading(),environment:t.environment},resolver:n})}},methods:{setState:function(e){this.state=Object.freeze(a({},this.state,e))},_handleFragmentDataUpdate:function(){this.setState({data:this.state.resolver.resolve(),relayProp:{isLoading:this.state.resolver.isLoading(),environment:this.state.relayProp.environment}})}},watch:a({},Object.keys(e).map(function(n){return r({},n,function(){var n=t.environment.unstable_internal,r=n.createFragmentSpecResolver,a=n.getDataIDsFromObject,i=a(e,this.state.prevProps),o=a(e,this.$props),s=this.state.resolver;if(this.state.relayEnvironment===t.environment&&this.state.relayVariables===t.variables&&q(i,o)){s.setProps(this.$props);var l=s.resolve();l!==this.state.data&&this.setState({data:l,prevProps:this.$props,relayEnvironment:t.environment,relayVariables:t.variables,relayProp:{isLoading:s.isLoading(),environment:t.environment}})}else s.dispose(),s=r(t,this.$options.name,e,this.$props,this._handleFragmentDataUpdate),this.setState({data:s.resolve(),prevProps:this.$props,relayEnvironment:t.environment,relayVariables:t.variables,relayProp:{isLoading:s.isLoading(),environment:t.environment},resolver:s})})})),beforeDestroy:function(){this.state.resolver.dispose()}}},E=require("relay-runtime");return{QueryRenderer:h,MutationTypes:E.MutationTypes,RangeOperations:E.RangeOperations,commitLocalUpdate:E.commitLocalUpdate,commitMutation:E.commitMutation,createRefetchContainer:function(){d(2===arguments.length||3===arguments.length,"createRefetchContainer: Expected `arguments.length` to be 2 or 3, got `%s`.",arguments),2===arguments.length&&[].unshift.call(arguments,null);var e=Array.prototype.slice.call(arguments),t=e[0],n=e[1],i=e[2];return b(t,n,function(e){return function(e,t){var n=this.relay;return{name:"relay-refetch-container",data:function(){var t=(0,n.environment.unstable_internal.createFragmentSpecResolver)(n,this.$options.name,e,this.$props,this._handleFragmentDataUpdate);return{context:Object.freeze({relay:{environment:n.environment,variables:n.variables}}),state:Object.freeze({data:t.resolve(),prevProps:this.$props,relayEnvironment:n.environment,relayVariables:n.variables,relayProp:this._buildRelayProp(n),localVariables:null,refetchSubscription:null,resolver:t})}},methods:{setState:function(e){this.state=Object.freeze(a({},this.state,e))},_buildRelayProp:function(e){return{environment:e.environment,refetch:this._refetch}},_handleFragmentDataUpdate:function(){this.setState({data:this.state.resolver.resolve()})},_getFragmentVariables:function(){return(0,n.environment.unstable_internal.getVariablesFromObject)(n.variables,e,this.$props)},_getQueryFetcher:function(){return this.state.queryFetcher||this.setState({queryFetcher:new o}),this.state.queryFetcher},_refetch:function(e,r,i,o){var s=this,l=n.environment,c=n.variables,u=l.unstable_internal,h=u.createOperationSelector,p=u.getRequest,f="function"==typeof e?e(this._getFragmentVariables()):e;f=a({},c,f);var v=r?a({},c,r):f;this.setState({localVariables:f});var b=o?{force:!!o.force}:void 0,y="function"==typeof i?{next:i,error:i}:i||{},d=h(p(t),f);this.state.refetchSubscription&&this.state.refetchSubscription.unsubscribe();var g=void 0;return this._getQueryFetcher().execute({environment:l,operation:d,cacheConfig:b,preservePreviousReferences:!0}).mergeMap(function(e){return s.context.relay.environment=n.environment,s.context.relay.variables=v,s.state.resolver.setVariables(v),m.create(function(e){s.setState({data:s.state.resolver.resolve()}),e.next(),e.complete()})}).finally(function(){s.state.refetchSubscription===g&&(s.state.refetchSubscription.unsubscribe(),s.setState({refetchSubscription:null}))}).subscribe(a({},y,{start:function(e){g=e,s.setState({refetchSubscription:e}),y.start&&y.start(e)}})),{dispose:function(){g&&g.unsubscribe()}}},_release:function(){this.state.resolver.dispose(),this.state.references.forEach(function(e){return e.dispose()}),this.state.references.length=0,this.state.refetchSubscription&&(this.state.refetchSubscription.unsubscribe(),this.setState({refetchSubscription:null})),this.state.queryFetcher&&this.state.queryFetcher.dispose()}},watch:a({},Object.keys(e).map(function(t){return r({},t,function(){var t=n.environment.unstable_internal,r=t.createFragmentSpecResolver,a=t.getDataIDsFromObject,i=a(e,this.state.prevProps),o=a(e,this.$props);if(this.state.relayEnvironment===n.environment&&this.state.relayVariables===n.variables&&y(i,o))this.state.localVariables||this.state.resolver.setProps(this.$props);else{this._release(),this.context.relay.environment=n.environment,this.context.relay.variables=n.variables;var s=r(n,this.$options.name,e,this.$props,this._handleFragmentDataUpdate);this.setState({prevProps:this.$props,relayEnvironment:n.environment,relayVariables:n.variables,relayProp:this._buildRelayProp(n),localVariables:null,resolver:s})}var l=this.state.resolver.resolve();l!==this.state.data&&this.setState({data:l})})})),beforeDestroy:function(){this._release()}}}.call(this,e,i)})},createPaginationContainer:function(){_(2===arguments.length||3===arguments.length,"createPaginationContainer: Expected `arguments.length` to be 2 or 3, got `%s`.",arguments),2===arguments.length&&[].unshift.call(arguments,null);var e=Array.prototype.slice.call(arguments),t=e[0],n=e[1],r=e[2];return b(t,n,function(e){return x.call(this,e,r)})},createFragmentContainer:function(){j(1===arguments.length||2===arguments.length,"createFragmentContainer: Expected `arguments.length` to be 1 or 2, got `%s`.",arguments),1===arguments.length&&[].unshift.call(arguments,null);var e=Array.prototype.slice.call(arguments),t=e[0],n=e[1];return b(t,n,O)},fetchQuery:E.fetchQuery,graphql:E.graphql,requestSubscription:E.requestSubscription}});
diff --git a/src/VueRelayFragmentContainer.js b/src/VueRelayFragmentContainer.js
index dc8711a..b1d9807 100644
--- a/src/VueRelayFragmentContainer.js
+++ b/src/VueRelayFragmentContainer.js
@@ -32,7 +32,24 @@ const createContainerWithFragments = function (fragments) {
         })
       }
     },
-    beforeUpdate () {
+    methods: {
+      setState (state) {
+        this.state = Object.freeze({
+          ...this.state,
+          ...state
+        })
+      },
+      _handleFragmentDataUpdate () {
+        this.setState({
+          data: this.state.resolver.resolve(),
+          relayProp: {
+            isLoading: this.state.resolver.isLoading(),
+            environment: this.state.relayProp.environment
+          }
+        })
+      }
+    },
+    watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
       const {
         createFragmentSpecResolver,
         getDataIDsFromObject
@@ -85,26 +102,9 @@ const createContainerWithFragments = function (fragments) {
           })
         }
       }
-    },
+    } })) },
     beforeDestroy () {
       this.state.resolver.dispose()
-    },
-    methods: {
-      setState (state) {
-        this.state = Object.freeze({
-          ...this.state,
-          ...state
-        })
-      },
-      _handleFragmentDataUpdate () {
-        this.setState({
-          data: this.state.resolver.resolve(),
-          relayProp: {
-            isLoading: this.state.resolver.isLoading(),
-            environment: this.state.relayProp.environment
-          }
-        })
-      }
     }
   }
 }
diff --git a/src/VueRelayPaginationContainer.js b/src/VueRelayPaginationContainer.js
index 2efb059..5640bb3 100644
--- a/src/VueRelayPaginationContainer.js
+++ b/src/VueRelayPaginationContainer.js
@@ -147,57 +147,6 @@ const createContainerWithFragments = function (fragments, connectionConfig) {
         })
       }
     },
-    beforeUpdate () {
-      const {
-        createFragmentSpecResolver,
-        getDataIDsFromObject
-      } = relay.environment.unstable_internal
-
-      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
-      const nextIDs = getDataIDsFromObject(fragments, this.$props)
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (
-        this.state.relayEnvironment !== relay.environment ||
-        this.state.relayVariables !== relay.variables ||
-        !areEqual(prevIDs, nextIDs)
-      ) {
-        this._release()
-
-        this.context.relay.environment = relay.environment
-        this.context.relay.variables = relay.variables
-
-        const resolver = createFragmentSpecResolver(
-          relay,
-          this.$options.name,
-          fragments,
-          this.$props,
-          this._handleFragmentDataUpdate
-        )
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver
-        })
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props)
-      }
-      const data = this.state.resolver.resolve()
-      if (data !== this.state.data) {
-        this.setState({ data })
-      }
-    },
-    beforeDestroy () {
-      this._release()
-    },
     methods: {
       setState (state) {
         this.state = Object.freeze({
@@ -492,6 +441,57 @@ const createContainerWithFragments = function (fragments, connectionConfig) {
           this.state.queryFetcher.dispose()
         }
       }
+    },
+    watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
+      const {
+        createFragmentSpecResolver,
+        getDataIDsFromObject
+      } = relay.environment.unstable_internal
+
+      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
+      const nextIDs = getDataIDsFromObject(fragments, this.$props)
+
+      // If the environment has changed or props point to new records then
+      // previously fetched data and any pending fetches no longer apply:
+      // - Existing references are on the old environment.
+      // - Existing references are based on old variables.
+      // - Pending fetches are for the previous records.
+      if (
+        this.state.relayEnvironment !== relay.environment ||
+        this.state.relayVariables !== relay.variables ||
+        !areEqual(prevIDs, nextIDs)
+      ) {
+        this._release()
+
+        this.context.relay.environment = relay.environment
+        this.context.relay.variables = relay.variables
+
+        const resolver = createFragmentSpecResolver(
+          relay,
+          this.$options.name,
+          fragments,
+          this.$props,
+          this._handleFragmentDataUpdate
+        )
+
+        this.setState({
+          prevProps: this.$props,
+          relayEnvironment: relay.environment,
+          relayVariables: relay.variables,
+          relayProp: this._buildRelayProp(relay),
+          localVariables: null,
+          resolver
+        })
+      } else if (!this.state.localVariables) {
+        this.state.resolver.setProps(this.$props)
+      }
+      const data = this.state.resolver.resolve()
+      if (data !== this.state.data) {
+        this.setState({ data })
+      }
+    } })) },
+    beforeDestroy () {
+      this._release()
     }
   }
 }
diff --git a/src/VueRelayQueryRenderer.js b/src/VueRelayQueryRenderer.js
index 38db23f..73057c1 100644
--- a/src/VueRelayQueryRenderer.js
+++ b/src/VueRelayQueryRenderer.js
@@ -106,20 +106,22 @@ const fetchQueryAndComputeStateFromProps = function (props, queryFetcher, retryC
   }
 }
 
+const props = {
+  cacheConfig: {},
+  dataFrom: {},
+  environment: {
+    required: true
+  },
+  query: {},
+  variables: {
+    type: Object,
+    default: () => ({})
+  }
+}
+
 export default {
   name: 'relay-query-renderer',
-  props: {
-    cacheConfig: {},
-    dataFrom: {},
-    environment: {
-      required: true
-    },
-    query: {},
-    variables: {
-      type: Object,
-      default: () => ({})
-    }
-  },
+  props,
   data () {
     const handleDataChange = ({ error, snapshot }) => {
       this.setState({ renderProps: getRenderProps(error, snapshot, queryFetcher, retryCallbacks) })
@@ -154,16 +156,24 @@ export default {
         }
       }),
       state: Object.freeze({
-        prevPropsEnvironment: this.$props.environment,
-        prevPropsVariables: this.$props.variables,
-        prevQuery: this.$props.query,
+        prevPropsEnvironment: this.environment,
+        prevPropsVariables: this.variables,
+        prevQuery: this.query,
         queryFetcher,
         retryCallbacks,
         ...state
       })
     }
   },
-  beforeUpdate () {
+  methods: {
+    setState (state) {
+      this.state = Object.freeze({
+        ...this.state,
+        ...state
+      })
+    }
+  },
+  watch: { ...Object.keys(props).map((key) => ({ [key]: function () {
     if (
       this.state.prevQuery !== this.query ||
       this.state.prevPropsEnvironment !== this.environment ||
@@ -188,9 +198,12 @@ export default {
         ...state
       })
     }
-  },
-  beforeDestroy () {
-    this.state.queryFetcher.dispose()
+  } })) },
+  render (h) {
+    if (process.env.NODE_ENV !== 'production') {
+      require('relay-runtime/lib/deepFreeze')(this.state.renderProps)
+    }
+    return h(this.component)
   },
   created () {
     this.component = {
@@ -207,18 +220,7 @@ export default {
       }
     }
   },
-  render (h) {
-    if (process.env.NODE_ENV !== 'production') {
-      require('relay-runtime/lib/deepFreeze')(this.state.renderProps)
-    }
-    return h(this.component)
-  },
-  methods: {
-    setState (state) {
-      this.state = Object.freeze({
-        ...this.state,
-        ...state
-      })
-    }
+  beforeDestroy () {
+    this.state.queryFetcher.dispose()
   }
 }
diff --git a/src/VueRelayRefetchContainer.js b/src/VueRelayRefetchContainer.js
index a7952b2..622202f 100644
--- a/src/VueRelayRefetchContainer.js
+++ b/src/VueRelayRefetchContainer.js
@@ -43,57 +43,6 @@ const createContainerWithFragments = function (fragments, taggedNode) {
         })
       }
     },
-    beforeUpdate () {
-      const {
-        createFragmentSpecResolver,
-        getDataIDsFromObject
-      } = relay.environment.unstable_internal
-
-      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
-      const nextIDs = getDataIDsFromObject(fragments, this.$props)
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (
-        this.state.relayEnvironment !== relay.environment ||
-        this.state.relayVariables !== relay.variables ||
-        !areEqual(prevIDs, nextIDs)
-      ) {
-        this._release()
-
-        this.context.relay.environment = relay.environment
-        this.context.relay.variables = relay.variables
-
-        const resolver = createFragmentSpecResolver(
-          relay,
-          this.$options.name,
-          fragments,
-          this.$props,
-          this._handleFragmentDataUpdate
-        )
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver
-        })
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props)
-      }
-      const data = this.state.resolver.resolve()
-      if (data !== this.state.data) {
-        this.setState({ data })
-      }
-    },
-    beforeDestroy () {
-      this._release()
-    },
     methods: {
       setState (state) {
         this.state = Object.freeze({
@@ -227,6 +176,57 @@ const createContainerWithFragments = function (fragments, taggedNode) {
           this.state.queryFetcher.dispose()
         }
       }
+    },
+    watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
+      const {
+        createFragmentSpecResolver,
+        getDataIDsFromObject
+      } = relay.environment.unstable_internal
+
+      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
+      const nextIDs = getDataIDsFromObject(fragments, this.$props)
+
+      // If the environment has changed or props point to new records then
+      // previously fetched data and any pending fetches no longer apply:
+      // - Existing references are on the old environment.
+      // - Existing references are based on old variables.
+      // - Pending fetches are for the previous records.
+      if (
+        this.state.relayEnvironment !== relay.environment ||
+        this.state.relayVariables !== relay.variables ||
+        !areEqual(prevIDs, nextIDs)
+      ) {
+        this._release()
+
+        this.context.relay.environment = relay.environment
+        this.context.relay.variables = relay.variables
+
+        const resolver = createFragmentSpecResolver(
+          relay,
+          this.$options.name,
+          fragments,
+          this.$props,
+          this._handleFragmentDataUpdate
+        )
+
+        this.setState({
+          prevProps: this.$props,
+          relayEnvironment: relay.environment,
+          relayVariables: relay.variables,
+          relayProp: this._buildRelayProp(relay),
+          localVariables: null,
+          resolver
+        })
+      } else if (!this.state.localVariables) {
+        this.state.resolver.setProps(this.$props)
+      }
+      const data = this.state.resolver.resolve()
+      if (data !== this.state.data) {
+        this.setState({ data })
+      }
+    } })) },
+    beforeDestroy () {
+      this._release()
     }
   }
 }
diff --git a/src/buildVueRelayContainer.js b/src/buildVueRelayContainer.js
index 3eb30da..51a4809 100644
--- a/src/buildVueRelayContainer.js
+++ b/src/buildVueRelayContainer.js
@@ -17,6 +17,11 @@ const buildVueRelayContainer = function (component, fragmentSpec, createContaine
   return {
     name: 'relay-context-consumer',
     inject: ['relay'],
+    render (h) {
+      return h(this.component, {
+        props: this.$attrs
+      })
+    },
     created () {
       const relay = assertRelayContext(this.relay)
       const { getFragment: getFragmentFromTag } = relay.environment.unstable_internal
@@ -27,6 +32,12 @@ const buildVueRelayContainer = function (component, fragmentSpec, createContaine
       this.component = {
         extends: createContainerWithFragments.call(this, fragments),
         props: Object.keys(fragments),
+        render (h) {
+          if (this.context) {
+            return h(this.component)
+          }
+          return this.component.render(h)
+        },
         created () {
           this.component = {
             name: 'relay-context-provider',
@@ -53,19 +64,8 @@ const buildVueRelayContainer = function (component, fragmentSpec, createContaine
               }))
             }
           }
-        },
-        render (h) {
-          if (this.context) {
-            return h(this.component)
-          }
-          return this.component.render(h)
         }
       }
-    },
-    render (h) {
-      return h(this.component, {
-        props: this.$attrs
-      })
     }
   }
 }