`v-click` doesn't work on a user-defined component in the build mode when the `<template>` part has a top-level comment

[whitphx]

Describe the bug

v-click doesn't work on a user-defined component in the build mode, when the <template> part has a top-level comment like below, while it works in the dev mode.

Hello.vue

<template>
  <!-- This top level comment causes the bug where the v-click on this component doesn't work in the build mode -->
  <div>Hello</div>
</template>

Hello2.vue

<template>
  <div>Hello2</div>
  <!-- The bug occurs even when the comment is placed here, after the element. -->
</template>

slides.md

<Hello v-click />
<Hello2 v-click />

Build mode (`slidev build`)	Dev mode (`slidev`)
https://github.com/user-attachments/assets/f9bdb8bd-3b4e-44a3-9ffe-17294805b3bb v-click doesn't work.	https://github.com/user-attachments/assets/1d5f6165-23c6-4ab0-b076-c27a4459f50b v-click works.

These screenshots are from the repro repo: https://github.com/whitphx/slidev-vclick-problem-repro

Minimal reproduction

Repro repo: https://github.com/whitphx/slidev-vclick-problem-repro

Steps to reproduce the behavior:

1. Clone the repo
2. Build the slide: pnpm build
3. Serve the built slide: npx serve -s dist
4. Open the slide: open http://localhost:3000/

Environment

• Slidev version: 51.3.0
• Browser: Google Chrome, Version 133.0.6943.142 (Official Build) (arm64)
• OS: macOS, 15.3.1 (24D70)

[leochiu-a]

It seems like not a bug because using custom directives on components is not recommended. Especially when the component has multiple root elements.

https://vuejs.org/guide/reusability/custom-directives.html#usage-on-components

[kermanx]

Closing this as this is a reported upstream issue: https://github.com/vuejs/core/issues/5407#issuecomment-2047603009