How to specify "key" as a required prop?

Question

I want this

export default {

  props: {
    key: {
      type: String,
      required: true,
    },
  },
  ...    
}

But it leads to a runtime error:

[Vue warn]: "key" is a reserved attribute and cannot be used as component prop.

EDIT:

To clarify: I want the reserved attribute "key" to be required. This is because my component relies on the trick of "Forcing component recreation by key change". (link)

Answer 1

key is one of special attributes reserved by Vue.js.

It can't be passed as a prop, same as ref, slot, scoped-slot, is.

Simply rename the prop to any name of your choice.

If usage of property named key is crucial inside child component, it is possible to create a computed property key inside child component that will return value from passed prop and will be accessible within child component.