Vue.js's (correct) approach of re-usable css module for multiple components

Question

How to re-use css modules in different vue SFCs, lets say my 3 components are as following

<template>
  <nav :class="[styleA.className, styleB.anotherClassName]">...</nav>
</template>

How would I import style-a.css and style-b.css as CSS modules and re-use in all 3 components?

Normally including each CSS module in each component should work, isn't it?, like so:

<style src="../styles/style-a.css" module="StyleA" />
<style src="../styles/style-b.css" module="StyleB" />

However, in dev mode this approach causes same css three times repeated in <style>...</style>, though the contents of each of the repeated style tag are same.

2nd approach working is useCssModule and <script setup> in main component, such as in App.vue

<style src="./styles/style-a.css" module="StyleA" />
<style src="./styles/style-b.css" module="StyleB" />

<script>
import { useCssModule } from 'vue';

export let styleA = {}
export let styleB = {}

export default {
  setup() {
    ['styelA', 'styleB'].forEach(cssModule => {
      const $style = useCssModule(cssModule)
      eval(`extendObject(${cssModule}, $style)`);
    })
  }
}
</script>

2nd approach usage involves following script in each component

<script>
import { styleA, styleB } from '../App.vue';
export default {
  data() {
    return { styleA, styleB }
  }
}
</script>

Before I test any further with webpack for production, I would like to know if latter is preferred over my first approach, or is there a preferred implementation available?