Non-prop attribute label not working whilst style does

Question

I have a custom component called PasswordInput, defined as

<template>
  <v-text-field
    :type="showPassword ? 'text' : 'password'"
    prepend-icon="mdi-lock"
    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
    @click:append="showPassword = !showPassword"
  />
</template>

<script>
export default {
  data() {
    return {
      showPassword: false
    }
  }
}
</script>

and used like this

<password-input
  label="Password"
  style="background-color:red"
></password-input>

However, although the style is passed to the route element, the label doesn't seem to work, as seen here,

Answer 1

Bind all attributes to v-text-field that you are applying on the password-input in the parent component.

<v-text-field
 v-bind="$attrs" // <-- Here
 :type="showPassword ? 'text' : 'password'"
 prepend-icon="mdi-lock"
 :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
 @click:append="showPassword = !showPassword"
/>