make fragment.beforeRemove recursive, fix #2100 properly

src/fragment/fragment.js

@@ -64,12 +64,12 @@ export default function Fragment (linker, vm, frag, host, scope, parentFrag) {
 
 Fragment.prototype.callHook = function (hook) {
   var i, l
-  for (i = 0, l = this.children.length; i < l; i++) {
-    hook(this.children[i])
-  }
   for (i = 0, l = this.childFrags.length; i < l; i++) {
     this.childFrags[i].callHook(hook)
   }
+  for (i = 0, l = this.children.length; i < l; i++) {
+    hook(this.children[i])
+  }
 }
 
 /**
@@ -147,16 +147,28 @@ function multiRemove () {
 
 /**
  * Prepare the fragment for removal.
- * Most importantly, disable the watchers on all the
- * directives so that the rendered content stays the same
- * during removal.
  */
 
 Fragment.prototype.beforeRemove = function () {
-  this.callHook(destroyChild)
+  var i, l
+  for (i = 0, l = this.childFrags.length; i < l; i++) {
+    // call the same method recursively on child
+    // fragments, depth-first
+    this.childFrags[i].beforeRemove(false)
+  }
+  for (i = 0, l = this.children.length; i < l; i++) {
+   // Call destroy for all contained instances,
+   // with remove:false and defer:true.
+   // Defer is necessary because we need to
+   // keep the children to call detach hooks
+   // on them.
+    this.children[i].$destroy(false, true)
+  }
   var dirs = this.unlink.dirs
-  var i = dirs.length
-  while (i--) {
+  for (i = 0, l = dirs.length; i < l; i++) {
+    // disable the watchers on all the directives
+    // so that the rendered content stays the same
+    // during removal.
     dirs[i]._watcher && dirs[i]._watcher.teardown()
   }
 }
@@ -184,20 +196,6 @@ function attach (child) {
   }
 }
 
-/**
- * Call destroy for all contained instances,
- * with remove:false and defer:true.
- * Defer is necessary because we need to
- * keep the children to call detach hooks
- * on them.
- *
- * @param {Vue} child
- */
-
-function destroyChild (child) {
-  child.$destroy(false, true)
-}
-
 /**
  * Call detach hook for a Vue instance.
  *