Vue version

3.3

Link to minimal reproduction

https://play.vuejs.org/#eNp1kE1uhDAMha9iZQMjIdijDFJ/9u0BsqHUTCMRJ0pMu0DcvU5okaZSs7P93ufnbOohhPZzRdUrnaZoA0NCXsNgyLrgI8MGEWfYYY7eQSXS6hw9eRd++m2Xi0ySse4OlECkYHRhGRlLBaCLi8fb1ai3ldmTUQNjYl0QotLdaVGN+uX+TQjLSJnBSfyGJk+JIUQfElzhy/LHM87junCq33G2hK95pLe8uYfE0dIN9qG+NLDlWKVdHYGqxtB+yXEP60tgK/i6CGl0KMrHO+W/F8u9kxzgCYmht0kCl4yt7Cu5QZ5Oi+cClrGszLGNgu7wdyfg/m8Mqf0bH0qcpg==

Steps to reproduce

if subcomponents props are defined like this => demo

const props = defineProps({
  tag:{
    type: String,
    default: 'button'
  }
})

in parent component

// tag = "a" or tag="input" is OK
// tag = "button"  is OK
<Comp tag="button">test</Comp>

if subcomponents props are defined like this => demo

const props = withDefaults(defineProps<{ tag: string }>(), {
  tag: 'button',
})

in parent component

// tag = "a" or tag="input" is OK
// tag = "button"  Maximum call stack size exceeded
<Comp tag="button">test</Comp>

What is expected?

component render correctly button, How do I get the components to work correctly?

What is actually happening?

Sorry, I don't know.

System Info

No response

Any additional comments?

No response

It's because your component is named "button". Don't name your components same like native dom elements, use two-words (or more) names for all your components