A child components `destroyed` hook is called before its `detached` hook

[sirlancelot]

Vue.js version

1.0.28

Reproduction Link

https://jsfiddle.net/w0r85tus/

Steps to reproduce

• Open the JSFiddle, then open devtools
• Click "show modal" in the result view
• Click "Ok" in the modal
• Observe the console.log statement order

What is Expected?

• Components should be detached before they are destroyed.
• The destroyed hook should always be the very last hook fired.

What is actually happening?

• The destroyed hook is getting called first, then the detached hook later.

Note that it makes no difference if the component has a transition applied. You can remove the transition attribute from the modal but the hook order stays the same.

When I'm using a tool like selectize.js inside a modal, I want Selectize to stay until the modal is off-screen, then destroy it. If I use the beforeDestroy or destroyed events, they will fire before the modal has transitioned out and the effect is that you will see a flash of the destroyed Selectize control.