Nuxt.jsでvue-mdc-adapterを使いたい

Question

お世話になっております。

現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapterを使いたいと思っています

困っていること

一通りスタイルは読み込めていて動くのですが、以下の画像（GIF）のようにリップルエフェクトが付きません。

現在のソースコード

plugins/vue-mdc-adapter.js

import Vue from 'vue'
import VueMDCAdapter from 'vue-mdc-adapter'

Vue.use(VueMDCAdapter)

pages/index.vue

<templates>
  <m-button>Button</m-button>
</templates>

<script>
export default {}
</script>

<style lang="scss" scoped>
@import "vue-mdc-adapter/dist/button/styles"
</style>

nuxt.config.js

const path = require('path')

module.exports = {
  plugins: [
    '~/plugins/vue-mdc-adapter'
  ],
  build: {
    extend (config) {
      config.module.rules.forEach(elem => {
        if (elem.loader === 'vue-loader') {
          elem.options.loaders.scss.forEach(elem => {
            if (elem.loader === 'sass-loader') {
              elem.options.includePaths = [path.resolve(__dirname, 'node_modules')]
            }
          })
        }
      })
    }
  }
}

どなたかご教授いただければ幸いです。