How to find the parent element (traverse) of a virtual DOM in Nuxt 3 on the server-side?

Question

I am utilizing a custom v-id directive on the template to transform it into structured BEM. However, when the HTML is received from the server, the v-id directive does not execute correctly. It only functions properly when the client-side rendering takes place. I would like the v-id directive to work correctly on the server-side as well.

1. mounted: I discovered that this hook cannot be used on the server.
2. getSSRProps: It only provides control over the attributes of the current element, so it cannot be used to find the parent element.
3. ChatGPT: No solutions have been provided.

ref: https://vuejs.org/guide/scaling-up/ssr.html#custom-directives

my plugin

//  "nuxt": "^3.4.3", "vue": "^3.2.0"
//plugins/helpers.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('id', {
        mounted(el, binding) {
            if (!el.parentElement) return
            const idValue = binding.value
            const parentIdValue = el.parentElement.id
            changeDomId(idValue, parentIdValue)


            function changeDomId(idValue: string, parentIdValue: string) {
                if (!parentIdValue || parentIdValue === '__nuxt') el.id = idValue
                else el.id = `${parentIdValue}__${idValue}`
            }
        }

    })
})

Are there any other methods available? thanks!