fix: Inconsistent behaviour when using directive in render function via withDirectives

[tibineagu]

🐛 The bug
When using a render function and the withDirectives utility, if applying the directive to a vnode that's a component, everything works as expected.

However, if it's being applied to a vnode that's a plain HTML Element, the data applied via the directive is not consistent across SSR and client.

🛠️ To reproduce
I've created a simplified reproduction at https://stackblitz.com/edit/github-s7ctqc?file=components%2FRendererComponent.vue,app.vue

1. Access the stackblitz repo and run the app
2. Open the JS console to notice logs from the renderer component
3. Refresh the preview pane to ensure the components get rendered via SSR
4. See the logs in the console - only in the cases when the directive is applied to a component VNode will the ID be the same in the mounted hook

🌈 Expected behaviour
The directive should be consistent regardless what type of VNode it's being applied to via the withDirectives utility.

[tibineagu]

@danielroe sorry to buzz you about this - i'm aware how busy you are with so many of the moving parts of the ecosystem.

Was just wondering if you had a chance to look into this, or whether this isn't a priority right now. (We've been able to work around the issue by wrapping anything we needed "directivized" into a component.)

I also know about the plans to include this natively into Vue 3.5 but i suspect that's quite some way away.

[adenvt]

@tibineagu I'm not sure what causing the issue, but i found, removing this code made it work perfectly.

vue-bind-once/src/index.ts

Line 8 in 55cd4cf

if (!el.hasAttribute(k)) {

[danielroe]

My apologies for the delay here...

I think it's the other way around. You wouldn't expect to find an element in the DOM with the same random ID you have just generated in data(). So the correct behaviour here is for there to be no elements logged to the browser console.