Menu rapidly changes position when parent element is removed.

[mcFrax]

The menu changes position when a containing component is removed, showing a very unpleasant flicker instead of a nice fade-out.

Steps to reproduce

1. Create a dynamic element,
2. Create a menu inside the element,
3. Create menu action that removes the dynamic element,
4. Click the action,
   
5. Observe the menu jumping to the corner of some wrapping element while it fades out.
   

In version 0.8.1 there is no such problem. It seems that in 0.8.1 the menu would just immediately disappear (no fade-out), so whether position is messed up or not doesn't matter.

(see examples for both behaviors below)

Which browser?

• Browser: Chrome 83.0.4103.106 (latest), on Kubuntu 19.10 (Linux)
• Vue version: 2.6.11
• Vue Material version: 1.0.0-beta-14

What is expected?

The menu fades out in the same place it first appeared.

What is actually happening?

The menu rapidly changes position when the parent component is removed.

Reproduction Link

Try removing the elements using the menu on the right.

v1.0.0 Example (bug repro)

v0.8.1 example (how it used to work)

Work-arounds that I tried

Making the menu disappear immediately (somewhat works)

.md-menu-content-leave-to, .md-menu-content-leave-active {
  display: none;
}

Works as expected, but removes the fade-out completely. Must be added to un-scoped style tag.

Note: I tried using just .md-menu-content-leave-to at first, but it left one frame with the misplaced menu in my real-life example.

Adding a transition on the element (didn't work!)

I assumed that adding a transition on the element would help (because then it's not immediately removed from the DOM), but for some reason it has no effect on the menu position.