Problem

I'm using useId() provided by Vue to connect input and label together (CustomInput component). But having <Icon /> somewhere on the page makes a hydration mismatch on CustomInput.

[Vue warn]: Hydration attribute mismatch on <label for=​"v-1-0">​Woof​</label>​ 
  - rendered on server: for="v-1-0"
  - expected on client: for="v-0-0"
  at <CustomInput label="Woof" > 
  at <TestComponent> 
  at <App key=4 > 
  at <NuxtRoot>

Every new icon increases the id generated on the server to 1.

Reproduction

Stackblitz