MdMenu bodyClickObserver sometimes sticks around longer than it should

[michaelstephendavies]

Steps to reproduce

Start here: https://codesandbox.io/s/vue-material-quick-start-forked-wickm?file=/App.vue

• When clicking on empty space, the click handler on the document correctly receives an event and the counter is incremented.
• When opening the menu, Vue Material creates a click handler on body which closes the menu and stops event propagation up to document. So when opening the menu by the button and closing it by clicking on empty space, the counter does not increase. This is probably correct.
• However if you open the menu and then close it some other way, e.g. clicking the button again, the handler on body is not removed. The next click on empty space will not increment the counter, but after that more clicks will increment the counter again.
• If you open the menu and close it by clicking the button, then open the menu again, two click handlers are created and the reference to the first one is lost and will never be cleared. No click events will ever propagate up to document again.

Which browser?

At least Windows 10, Chrome 85.0.4183.83. I originally encountered the problem with Vue 2.6.10 and Vue Material 1.0.0-beta11 but you can reproduce the problem in the codesandbox as well.

What is expected?

Closing the menu by some way other than the bodyClickObserver should not prevent future click events from propagating.

What is actually happening?

Closing the menu by some way other than the bodyClickObserver prevents at least one future click event from propagating, and in some cases all future click events stop propagating.

Reproduction Link

https://codesandbox.io/s/vue-material-quick-start-forked-wickm?file=/App.vue