Css modules vue nuxt.js

В рамках обучения столкнулся с трудностью. Учебный проект основан на nuxt.js, хочу странички разбить на компоненты и модули css, например MyTest.vue и MyTest.module.sass, тем самым вынести стили в отдельный от компонента файл. Прочитав в документации что файл обязан заканчиваться на *.module.sass и найденный пример на dev.to https://dev.to/fridanyvall/css-modules-in-vue-js-2267 Не работают, не присваивается класс, хотя импорт работает. Подскажите пожалуйста что я делаю не так. Пример моего кода :

    <template>
        <div :class="MyTest.red">
            <h1>Test</h1>
        </div>
    </template>

    <script>
    import MyTest from '../test/MyTest.module.sass'
    export default {
        data() {
            return {
                MyTest
            }
        }
    }
    </script>

Отдельный файл MyTest.module.sass

        .red
            color: red

Прочитал еще один пример https://forum.vuejs.org/t/css-modules-in-standalone-files-in-vue-cli-3-beta-6/31726/2 Но он тоже не работает, там правда vue-cli 3.0 в этом наверное проблема.

    <template>
        <div :class="MyTest.red">
            <h1>Test</h1>
        </div>
    </template>

    <script>
    import MyTest from '../test/MyTest.module.sass'
    export default {
        created() {
            this.MyTest = MyTest
        }
    }
    </script>

Отдельный файл MyTest.module.sass

    .red
        color: red