fix(vue3): provide keys for components, that could be reused

[Antreesy]

☑️ Resolves

• Fix leaking component data
• passing key forces component to rerender (if submenu page was changed)
  • before close-after-click could be leaked as true to a new component, which should not have it

🖌️ UI Checklist

A	B

🚧 Tasks

• Alternative: check it in vue-library instead?

🏁 Checklist

• 🌏 Tested with different browsers / clients:
  • Chromium (Chrome / Edge / Opera / Brave)
  • Firefox
  • Safari
  • Talk Desktop
  • Not risky to browser differences / client
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[nickvergessen]

does this refresh good enough even when its reused inside a parent that has a different key? Just asking for my understanding

[Antreesy]

if parent has a different key, it should re-render parent and everything underneath

[ShGKme]

does this refresh good enough even when its reused inside a parent that has a different key? Just asking for my understanding

Key doesn't trigger re-rendring, but re-order/re-mount.

And Vue doesn't support parent remounting without children remounting.

So changing the parent key completely destroys and re-creates children. Not just re-render.

[DorraJaouad]

Nearest parent is NcListItem (skipping templates) and it has key updated by token so it should be enough?

[Antreesy]

Nearest parent is NcListItem (skipping templates) and it has key updated by token so it should be enough?

It's not about Virtual scroller, but switching submenus (see above)

[ShGKme]

• passing key forces component to rerender (if submenu page was changed)

Rerendering is triggered by reactive data change.
If a component doesn't rerender on a state change, there is a reactivity loss, and it should be fixed.

key either help Vue to identify an instance and reorder instances instead of updating props of instances (v-for case), or triggers remount (recreate) of a component instance in case of a completely new key.

NcActionButton supports updating props even in a v-for without key.
But probably something goes wrong due to our manual rendering in NcActions.

These keys don't hurt (they don't create unneeded remounts), let's go with them.