How to use css modules in vue to solve the problem of dynamically increasing class names in js

the following is a component of an app.vue generated by vue-cli, modified with css modules

<template>
  <div :id="$styleB.app">
    <div :id="$styleB.nav" :class="$styleB.bg">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$styleB)
      //{bg: "App_bg_2d5i2", app: "App_app_7GWKZ", nav: "App_nav_32ReM", router-link-exact-active: "App_router-link-exact-active_25SP7"}
    }
  }
</script>
<style module="$styleA">

</style>


<style  module="$styleB" lang="scss" >
.bg {
  font-size: 14px;
  // background: rgb(83, 13, 13)
}
-sharpapp {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: -sharp2c3e50;
}
-sharpnav {
  padding: 30px;
  a {
    font-weight: bold;
    color: -sharp2c3e50;
    &.router-link-exact-active {
      color: -sharp42b983;
    }
   }
}
</style>

the problem here is that the router-link-exact-active class name is dynamically generated by js, but because css modules is enabled, the class name here is replaced with App_router-link-exact-active_25SP7, that is, the style for this state fails

I tried to set router-link-exact-active to global

-sharpnav {
  padding: 30px;
  a {
    font-weight: bold;
    color: -sharp2c3e50;
    :global(&.router-link-exact-active) {
    color: -sharp42b983;
    }
  }
}

in this way, although the router-link-exact-active class name is not converted, it can only resolve

 -sharpApp_nav_32ReM a {
    font-weight: bold;
    color: -sharp2c3e50;
}

cannot parse-sharpApp_nav_32ReM a.router-link-exact-active to
if the following

-sharpnav {
  padding: 30px;
  a {
    font-weight: bold;
    color: -sharp2c3e50;
    &.:global(router-link-exact-active) {
    color: -sharp42b983;
    }
  }
}

compilation will make errors

then I try to extract the router-link-exact-active

-sharpnav {
  padding: 30px;
  a {
    font-weight: bold;
    color: -sharp2c3e50;
  }
}
:global {
  .router-link-exact-active {
    color: -sharp42b983;
  }
}

this creates a problem, however, that the weight of sharpApp_nav_32ReM an is larger than that of .router-link-exact-active
, so I"ll try the following words

:global {
  -sharpnav a.router-link-exact-active {
    color: -sharp42b983;
  }
}

I don"t know if it is because of the-sharpnav conflict that the style here has not been parsed

I would like to ask if there is any way to make the transition from css to using css modules, with as little modification to the structure as possible, which can solve these class name problems dynamically inserted by js