[Menu]: Hoist To Body property isn't reactive

[kfirba]

Describe the bug
When we set the hoist-to-body prop to be dynamic based on some other property it only works when the value changes to true. If the initial value is false and then we change the value to true we do get the desired behavior and the menu is being hoisted to the body.

However, when the value is true and we change it to false, the menu does not get "de-hoisted" back to where it initially was in the DOM. This might not be possible with the way MDC web works but according to their docs there is setIsHoisted() method which accepts a boolean and leads me to believe that a menu can be de-hoisted.

To Reproduce
Steps to reproduce the behavior:

1. create a menu with hoisted-to-body prop bounded to a reactive data hoistMenu: false
2. Change hoistMenu to true, the menu should be hoisted now.
3. Change hoistMenu back to false and the menu is not being de-hoisted

Expected behavior
What I expect to happen is that the menu will be re-rendered in its proper spot in the DOM.

[tychenjiajun]

Thank you for reporting! PR is welcomed.

[tychenjiajun]

There is no getter for isHoisted. So I think the best way to address this issue is to add a method setIsHoisted and allow user to call it using Vue refs, at the same time make hoisted-to-body deprecated. This will be a breaking change so it's better to introduce it later.