Vue 3 dynamic link for both external and internal links(with vue-router)

AppLink.vue

<template>
  <a v-if="isExternal" :href="to" target="_blank" rel="noopener"><slot /></a>
  <router-link v-else v-bind="$props"><slot /></router-link>
</template>

<script>
import { computed } from "vue";
import { RouterLink } from "vue-router";

export default {
  props: {
    ...RouterLink.props,
  },
  setup(props) {
    const isExternal = computed(() => typeof props.to === "string" && props.to.startsWith("http"));
    return { isExternal };
  },
};
</script>