Environment

• Operating System: Darwin
• Node Version: v22.13.1
• Nuxt Version: 3.17.3
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: pnpm@10.10.0
• Builder: -
• User Config: devtools, ssr, modules, css, future, compatibilityDate
• Runtime Modules: @nuxt/ui@3.1.1, @nuxt/eslint@1.3.1
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt UI

Version

3.1.1

Reproduction

https://github.com/meuschke/nuxt-ui-issue-slow-perf

Description

Hi Nuxt UI team,

I'm encountering a significant performance issue when rendering a large number of UButton components in a Nuxt UI app.

🐛 The Problem When rendering a list of 10,000 UButton components, and clicking one of them to render three

containers, there's a 4–5 second delay before the UI updates.

Upon profiling the app using Chrome DevTools, I found that the bottleneck seems to be the flushJobs function from @vue/runtime-core, which takes an extreme amount of time to execute after the interaction. Please see the profiler screenshot below:

🧪 Reproduction
I've created a minimal example project to reproduce the issue:
🔗 https://github.com/meuschke/nuxt-ui-issue-slow-perf

There's also a short video demonstrating the delay:

✅ Additional Context
For comparison, I recreated a similar UI scenario using shadcn-vue components, and there were no performance issues — the response was nearly instantaneous.

This makes me think the issue may lie within how Nuxt UI or its components interact with Vue’s reactivity system or lifecycle.

🙏 Request
Could someone from the Nuxt UI team take a look and advise on:

Why flushJobs is taking so long in this setup?

If there's a workaround or optimization path we can apply?

Whether this is a known issue with UButton or the Nuxt UI component system in general?

Thanks in advance for your help!

Additional context

No response

Logs