Props Propagating

MyButton.props.ts

import { ComponentTheme } from "@/types/ComponentTheme";
import { IconSvg } from "@/types/IconSvg";

export interface MyButtonProps {
  theme?: ComponentTheme;
  small?: boolean;
  icon?: IconSvg;
  rightIcon?: IconSvg;
  counter?: number;
  disabled?: boolean;
  loading?: boolean;
}

export const defaultMyButtonProps: MyButtonProps = {
  theme: ComponentTheme.BLUE,
  small: false,
  icon: undefined,
  rightIcon: undefined,
  counter: undefined,
  disabled: false,
  loading: false,
};

MyButton.vue

<template>
  <button class="my-fancy-style">
    <slot></slot>
    {{ counter }}
  </button>
</template>

<script lang="ts" setup>
import { defaultMyButtonProps, MyButtonProps } from "./MyButton.props";

const props = withDefaults(defineProps<MyButtonProps>(), defaultMyButtonProps);
</script>

MyLinkButton.vue

<template>
  <component
    :is="props.to ? RouterLink : 'a'"
    :to="props.to"
    :href="props.href"
    class="my-link-button"
  >
    <MyButton v-bind="propsToPass">
      <slot></slot>
    </MyButton>
  </component>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { RouteLocationRaw, RouterLink } from "vue-router";

import MyButton from "@/components/MyButton/MyButton.vue";
import { defaultMyButtonProps, MyButtonProps } from "@/components/MyButton/MyButton.props";

interface MyLinkButtonProps {
  to?: RouteLocationRaw;
  href?: string;
}

const props = defineProps<MyButtonProps & MyLinkButtonProps>();

const propsToPass = computed(() =>
  Object.fromEntries(
    Object.entries(props).filter(([key, _]) =>
      Object.hasOwn(defaultMyButtonProps, key)
    )
  )
);
</script>