I'm using semantic-ui modal to manage modals in my app. The modals are all initially placed within a parent div and that div is the root of a Vue.js app. Within the modal content are some Vue components.
Semantic-ui modal detach()es the modal div from the DOM and appendTo()s it to dimmer div at the root of the site in order to aid rendering. The Vue.js app continues to function as expected which is great, but I wondered if this is a fluke, and if I should be wary of any gotcha's when Vue elements get moved outside of the root Vue element?
This is a perfectly valid technique. All the orthogonal components like Dialog, snackbar, notification, etc. are rendered this way. It works perfectly fine with Vue.js Virtual DOM.
This pattern is so common that there is a library to do this - portal-vue. It is written by Vue.js core team member.