UInputMenu item class mismatch after filtering

[amano225]

Environment

• Operating System: Windows_NT
• Node Version: v22.11.0
• Nuxt Version: 4.0.3
• CLI Version: 3.28.0
• Nitro Version: 2.12.4
• Package Manager: npm@10.9.0
• Builder: -
• User Config: compatibilityDate, devtools, modules, css, ui
• Runtime Modules: @nuxt/ui@3.3.2, @nuxt/eslint@1.8.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.3.2

Reproduction

I attempted to reproduce the issue using the official Nuxt UI CodeSandbox template, but it seems that the class property is not applied at all in that environment. Therefore, the bug cannot be reproduced there.

However, in my local environment (Nuxt v4.0.3 / Nuxt UI v3.3.2), the issue is consistently reproducible.
Please refer to the attached screenshot for visual confirmation.

Here is the code I used:

<UInputMenu
  :items="[
    {
      label: 'Blue',
      class: 'text-blue-500!',
    },
    {
      label: 'Red',
      class: 'text-red-500!',
    },
    {
      label: 'Green',
      class: 'text-green-500!',
    },
  ]"
/>

Description

When using UInputMenu, each item can be assigned a custom class. However, after filtering, the class assignment seems to mismatch. For example, the "Green" item may be displayed in red color.

Additional context

• Initial state (before filtering):

• After filtering with "r":

In the filtered state, the "Green" item is incorrectly displayed in red.

Logs