diff --git a/lib/app/App.vue b/lib/app/App.vue
index c69572212e..58b3ba1e36 100644
--- a/lib/app/App.vue
+++ b/lib/app/App.vue
@@ -14,12 +14,14 @@ layoutsKeys.forEach(function (key, i) { %>
 }
 
 export default {
-  data () {
-    return { layout: null }
-  },
+  data: () => ({
+    layout: null,
+    layoutName: ''
+  }),
   methods: {
     setLayout (layout) {
       if (!layout || !layouts['_' + layout]) layout = 'default'
+      this.layoutName = layout
       let _layout = '_' + layout
       if (typeof layouts[_layout] === 'function') {
         return this.loadLayout(_layout)
diff --git a/lib/app/client.js b/lib/app/client.js
index 6dfd426abd..13409b560c 100644
--- a/lib/app/client.js
+++ b/lib/app/client.js
@@ -121,7 +121,8 @@ function render (to, from, next) {
       if (Component._data && typeof Component._data === 'function') {
         var promise = promisify(Component._data, context)
         promise.then((data) => {
-          Component.options.data = () => data || {}
+          Component._cData = () => data || {}
+          Component.options.data = Component._cData
           Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
           if (Component._Ctor && Component._Ctor.options) {
             Component._Ctor.options.data = Component.options.data
@@ -169,11 +170,13 @@ function fixPrepatch (to, ___) {
       }
       return instance.constructor.options.__file
     })
+    hotReloadAPI(this)
   })
 }
 
 // Special hot reload with data(context)
 function hotReloadAPI (_app) {
+  if (!module.hot) return
   const $nuxt = _app.$nuxt
   var _forceUpdate = $nuxt.$forceUpdate.bind($nuxt)
   $nuxt.$forceUpdate = function () {
@@ -185,7 +188,14 @@ function hotReloadAPI (_app) {
       Component._Ctor = Component
     }
     let promises = []
-    promises.push(_app.setLayout(Component.options.layout))
+    // If layout changed
+    if (_app.layoutName !== Component.options.layout) {
+      let promise = _app.setLayout(Component.options.layout)
+      promise.then(() => {
+        hotReloadAPI(_app)
+      })
+      promises.push(promise)
+    }
     const next = function (path) {
       <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
       router.push(path)
@@ -198,12 +208,16 @@ function hotReloadAPI (_app) {
       Component._data = Component._Ctor.options.data || noopData
       let p = promisify(Component._data, context)
       p.then((data) => {
-        Component.options.data = () => data || {}
+        Component._cData = () => data || {}
+        Component.options.data = Component._cData
         Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
         Component._Ctor.options.data = Component.options.data
         <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
       })
       promises.push(p)
+    } else if (Component._cData) {
+      Component.options.data = Component._cData
+      Component._Ctor.options.data = Component.options.data
     }
     // Check if fetch has been updated
     const originalFetchFn = (Component.options.fetch || noopFetch).toString().replace(/\s/g, '')
@@ -246,7 +260,8 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
         if (Component.options.data && typeof Component.options.data === 'function') {
           Component._data = Component.options.data
           if (NUXT.serverRendered) {
-            Component.options.data = () => NUXT.data[index] || {}
+            Component._cData = () => NUXT.data[index] || {}
+            Component.options.data = Component._cData
             Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
           }
           if (Component._Ctor && Component._Ctor.options) {
@@ -291,7 +306,7 @@ Promise.all(resolveComponents)
     _app.$loading = _app.$nuxt.$loading
     <% } %>
     // Hot reloading
-    if (module.hot) hotReloadAPI(_app)
+    hotReloadAPI(_app)
     // Call window.onNuxtReady callbacks
     Vue.nextTick(() => nuxtReady(_app))
   }