lodbrock

Нашел так же еще два решения, не знаю насколько они правильные, может кто-то подскажет, но возможно кому-то пригодится.
1)Код конфига vue.config.js:

module.exports = {
  configureWebpack: {
    resolve: {
      modules: ['src', 'node_modules'],
    },
  },
  css: {
    requireModuleExtension: false,
    loaderOptions: {
      css: {
        modules: {
          localIdentName: '[path]-[local]-[hash:4]'
        },
      }
    }
  }
}

Код компонента:

<template>
  <div :class="qqq">test1</div>
</template>

<script>
import styles from './styles.css'

export default {
  name: 'Test',
  data: function () {
    return {
      ...styles
    }
  },
}
</script>

Название класса в итоге:

2)Конфиг vue.config.js остается таким же, но необходимо установить данный пакет Vue CSS Modules.
Код компонента:

<template>
  <div styleName="qqq">test1</div>
</template>

<script>
import CSSModules from 'vue-css-modules'
import styles from './styles.css'

export default {
  name: 'Test',
  mixins: [CSSModules(styles)],
}
</script>

Название класса: