SelectMenu `searchable` function executed on each key press in other `input`

[toyi]

Environment

• Operating System: Linux
• Node Version: v20.12.2
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: pnpm@9.0.1
• Builder: -
• User Config: devtools, app, vite, colorMode, components, alias, imports, $development, $production
• Runtime Modules: -
• Build Modules: -

Version

v2.15.2

Reproduction

https://stackblitz.com/edit/nuxt-ui-4nf6on?file=app.vue

Description

There are two inputs in the reproduction.

One is a native input tag and the other a USelectMenu. Only the input is bound to a ref, in this case state.title.

On each key press inside this input, the searchable function gets executed (after the debounce delay). This can quickly leads to a large number of unnecessary executions, which are often backend calls to query a database.

This behavior can be observed with UInput or withing a UFormGroup as well, it doesn't matter: if a ref is updated somewhere, the searchable function is executed.

⚠️ This is a problem happening on the client side, you need to open the console to actually see those multiple console.log('searchable executed'); confirming the searchable function is executed when it should not.

Additional context

No response

Logs

No response

[romhml]

Defining your function outside of the template fixes the issue: https://stackblitz.com/edit/nuxt-ui-8ndzeb?file=app.vue

I'm not a 100% sure, but I think vue is redefining your function in the :searchable props when it re-renders, causing the prop to change and the component to re-execute it.