Why is localIdentName not working in Vue?

Question

webpack

Good afternoon everyone. I generated a new Vue project using VUE-CLI-3 and I needed to dynamically change the name of the classes. I found the documentation on the official site, and edited the vue.config.js file in the root of the project, adding the following code, but for some reason it does not work. What could be the problem?
ps documentation link: https://cli.vuejs.org/en/guide/css.html#css-%D0%BC...

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}

Package.json - using sass loader

"dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },

At the output I would like to get something like this: