use conditional props for component in v-button (#13840)

app/src/components/v-button/v-button.vue

@@ -22,10 +22,7 @@
 			]"
 			:type="type"
 			:disabled="disabled"
-			:to="to !== '' ? to : undefined"
-			:href="href"
-			:target="component === 'a' ? '_blank' : undefined"
-			:rel="component === 'a' ? 'noopener noreferrer' : undefined"
+			v-bind="additionalProps"
 			@click="onClick"
 		>
 			<span class="content" :class="{ invisible: loading }">
@@ -156,6 +153,24 @@ export default defineComponent({
 			return 'button';
 		});
 
+		const additionalProps = computed(() => {
+			if (props.to) {
+				return {
+					to: props.to,
+				};
+			}
+
+			if (component.value === 'a') {
+				return {
+					href: props.href,
+					target: '_blank',
+					rel: 'noopener noreferrer',
+				};
+			}
+
+			return {};
+		});
+
 		const { active, toggle } = useGroupable({
 			value: props.value,
 			group: 'item-group',
@@ -176,7 +191,7 @@ export default defineComponent({
 
 			return false;
 		});
-		return { sizeClass, onClick, component, isActiveRoute, toggle };
+		return { sizeClass, onClick, component, additionalProps, isActiveRoute, toggle };
 
 		function onClick(event: MouseEvent) {
 			if (props.loading === true) return;