My Nuxt Button component does not have "href" attribute

I am using Nuxt and i have created Button component in a way that if we pass propsto, it will generate nuxt-link and if we set it to href, it will generate a tag.

the problem i am facing is if we pass to it generates a tag but without href attribute.

my Button.vue file

<template>
  <component :is="type" :to="to" :href="href" class="btn btn-primary">
    <slot/>
  </component>
</template>
    
<script>
export default {
  props: {
    href: {
      type: String,
      default: null
    },
    to: {
      type: String,
      default: null
    }
  },
  computed: {
    type() {
      if (this.to) {
        return "nuxt-link";
      } else if (this.href) {
        return "a";
      } else {
        return "button";
      }
    }
  }
};
</script>
   
<style scoped>
</style>

my Layout file

<script>
import Btn from '~/components/Button/Button.vue'
export default {
  components: {
    Btn
  }
}
</script>

<template>
    <b-container>
      <Btn to="/about">I'm a Button</Btn>
    </b-container>
</template>

<style scoped lang="scss">

</style>