Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/github-egwnjl?file=app.vue,components%2FComponent1.vue,components%2FComponent2.vue

Steps to reproduce

A component has a prop defined with the same name as an inherited attr

What is expected?

I would expect the defined prop to take precedence over the inherited attr

What is actually happening?

The inherited attr is actually overriding the defined prop

System Info

No response

Any additional comments?

There is a workaround to disable inheritance inheritAttrs: false and bind without the conflicting attr v-bind="attrsWithoutBar" however as you can see below it is a bit hacky:

computed: {
  attrsWithoutBar() {
    //this is a hack to ensure the `bar` attr 
    //doesnt override the `bar` prop
    const attrsCloned = { ...this.$attrs }
    return delete attrsCloned.bar && attrsCloned
  },
}