[Vuejs]-CSS Modules <style module> doesnt work

It may be undefined because you not using that class.

Below is a working example.It also includes how to set dynamic css module class:

<template>
    <div>
        <button :class="[className1, className2, dynamicClass]" @click="showStyleObject">Click Me</button>
    </div>
</template>

<script>
    export default {
        name: 'example',
        props: {
          'type-of-button': {
              validator: function (value) {
                  return ['primary', 'secondary', 'default'].indexOf(value) !== -1
              }
          }
        },
        data() {
            return {
                className1: this.$style.button,
                className2: this.$style.button2,
            }
        },
        created() {
            console.log(this.$style.button)
            console.log(this.$style.button2)
        },
        computed: {
          dynamicClass() { 
              return this.$style[this.typeOfButton]
          }
        },
        methods: {
            showStyleObject() {
                console.log(this.$style)
            }
        },
    }
</script>

<style module>
    .button {
        background: red;
    }

    .button2 {
        padding: 8px 10px;
    }

    .primary {
        padding: 8px 10px;
        background: blue;
        color: white;
        border-radius: 10px;
    }

    .secondary {
        padding: 8px 15px;
        background: darkslategrey;
        color: aliceblue;
        border: none;
    }

    .default {
        background: aliceblue;
    }
</style>