Style individual `RouterLink`s

Suppose a simple Vue.js component:

<template>
  <RouterLink to="#">AAA</RouterLink>
  <RouterLink to="#">BBB</RouterLink>
</template>

I cannot pass custom classes to these links. So, how do I style individual RouterLinks such that the first one is red and the second one is green?

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<template>
  <header>
     <nav>
        <RouterLink  class="link-red" to="#">Home</RouterLink>
        <RouterLink  class="link-green" to="#">About</RouterLink>
      </nav>
  </header>
</template>

<style scoped>
.link-red {
  color: red;
}
.link-green {
  color: green;
}
</style>

or

<script setup lang="ts">
  import { RouterLink } from 'vue-router';
</script>

<template>
  <header>
    <nav>
      <RouterLink
        active-class="link-red"
        to="/">
        Home
      </RouterLink>
      <RouterLink
        active-class="link-green"
        to="/about"
        >
        About
      </RouterLink>
    </nav>
  </header>
</template>

<style scoped>
  .link-red {
    color: red;
  }
  .link-green {
    color: green;
  }
</style>