fix(click-outside): correctly remove shadow DOM event listeners

[cgodo]

Description

ClickOutside directive uses global onmousedown and click events in the parent shadowRoot of the element when the element is inside the Shadow DOM.

When unmounted, the directive tries to remove those event handlers, but since the element is already unmounted, it can't find the parent shadowRoot, so the events are never removed.

This causes VOverlay content clicks to behave incorrectly, closing menus and submenus when they should stay open.

Using beforeUnmount instead of unmounted to remove event handlers in ClickOutside directive solves the issue.

fixes #19616

Markup:

<template>
  <v-menu v-bind="$attrs" location="right">
    <template #activator="{ props }">
      <v-btn v-bind="props" class="ma-5">Normal Menu</v-btn>
    </template>
    <v-list>
      <v-menu location="right">
        <template #activator="{ props }">
          <v-list-item v-bind="props" title="Submenu" />
        </template>
        <v-list>
          <v-list-item title="Submenu item" />
          <v-list-item title="Submenu item" />
        </v-list>
      </v-menu>
    </v-list>
  </v-menu>

  <div ref="shadow" />
</template>

<script>
  import { createApp, h } from 'vue'
  import vuetify from './vuetify'
  import { VBtn, VList, VListItem, VMenu } from 'vuetify/src/components'

  export default {
    name: 'Playground',
    setup () {
      return {

      }
    },
    mounted () {
      const shadowRoot = this.$refs.shadow.attachShadow({ mode: 'open' })
      const shadowApp = document.createElement('div')
      shadowApp.id = 'shadow-app'
      shadowRoot.appendChild(shadowApp)
      document.querySelectorAll('style').forEach(styleElement => {
        shadowRoot.appendChild(styleElement.cloneNode(true))
      })

      createApp({
        render: () => h(VMenu, { location: 'right' }, {
          activator: ({ props }) => h(VBtn, { ...props, class: 'ma-5' }, 'Shadow Menu'),
          default: () => [
            h(VList, {}, () => [
              h(VMenu, { location: 'right' }, {
                activator: ({ props }) => h(VListItem, { ...props, title: 'Submenu' }),
                default: () => [
                  h(VList, {}, () => [
                    h(VListItem, { title: 'Submenu item' }),
                    h(VListItem, { title: 'Submenu item' }),
                  ]),
                ],
              }),
            ]),
          ],
        }),
      })
        .use(vuetify)
        .mount(shadowApp)
    },
  }
</script>