But if I configure inheritAttrs to false, it's ok. It feels a little weird. Can anyone tell me why

The 'props' attribute passed into createApp is similar to the props object passed to h. It contains a mixture of component props, event listeners and fallthrough attributes.

That object is split up inside the component. Typically, you'd use defineProps to declare any props that your component uses. You don't currently seem to be doing that.

Any properties that aren't declared as component props or events become fallthrough attributes. These are what you get from useAttrs(). Fallthrough attributes are automatically applied to the root node of a component, which is why you see them as attributes of the <div> in the final DOM.

Fallthrough attributes are documented at https://vuejs.org/guide/components/attrs.html.

You should probably be using component props rather than fallthrough attributes. I can see why using attrs is convenient for your use case, but you're not really using it for its intended purpose.

Similar to this: https://github.com/orgs/vuejs/discussions/12888