By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This may not always be the desired behavior and, therefore, can be disabled.
A short explanation of fallthrough attributes: When we have a single-root component, these bindings will be applied to the root element of the child component as standard HTML attributes.
This may only sometimes be the desired behavior when authoring a component that wraps a target element or another component.
By setting inheritAttrs to false, this default behavior can be disabled. The attributes are available via the $attrs instance property and can be explicitly bound to a non-root element using v-bind.
Let's take a look at an example. In this component, the <input> element that should receive the attributes is wrapped inside a <label> element. By default, the <label> element would inherit the attributes but we will fix that:
<script>
export default {
inheritAttrs: false,
props: ['label', 'value'],
emits: ['input'],
}
</script>
<script setup>
const count = ref(0)
</script>
<template>
<label>
<span>{{ label }}: {{ count }}</span>
<input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
</label>
</template>
By using inheritAttrs: false, the attributes do not "fallthrough" on the root node (<label>). We manually bound them to the <input> element via v-bind="$attrs".
As you can see in this example, it's absolutely valid to add two script blocks.
