Vue.$destroy(remove) does not trigger "detached" hook on second level children

[tgeorgiev]

I have experienced this issue where I have 3 levels of Vue components, calling $destroy on the top most component will not trigger the detached hook on the bottom most child.

By looking at the _destroy function, I think that the issue is that $remove is called last and at this point, on children in the hierarchy $destroy was called, causing them to remove event hooks ($off() as part of _cleanup).

I think that the removal should be brought before those cleanups, and the lifecycle order should be changed.
Evan, please excuse me if I breaking something or making faulty statement, but I couldn't anywhere when the detached hook is supposed to be called. I found one test that validates that is called after destroyed, but in my humble opinion I think that detached should be called before destroyed. After all shouldn't there be a state for a component from detached, to go back to attached, before we have destroyed the instance?

What I mean to say is that having such component hierarchy
A
-B
--C

when calling A.$destroy, the events would be
detached
-detached
--detached
beforeDestroy
-beforeDestroy
--beforeDestroy
--destroyed
-destroyed
destroyed

You can observe it here http://jsfiddle.net/pepbu9cf/

I have a pending proposal for fix, will post soon.

[tgeorgiev]

A possible workarround that I tried and works for me is instead of

vue.$destroy(true)

to call

vue.$remove(function() {
  vue.$destroy();
});

[yyx990803]

Merged #1967