markdown-it-attrsがmdファイルのimport時に動作しない

Question

Nuxtプロジェクト内でmarkdown-itを使ってWebページを表示しようとしています。

nuxt.config.jsでmoduleとしてmarkdownitを読み込んでおり、コードは下記の通りです。

modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    preset: 'default',
    injected: true,
    breaks: true,
    html: true,
    linkify: true,
    typography: true,
    xhtmlOut: true,
    langPrefix: 'language-',
    quotes: '“”‘’',
    use: ['markdown-it-attrs'],
    highlight: function(/*str, lang*/) {
      return ''
    }
  },

ページを表示しているvueファイルは下記のとおりです。

<template>
  <div class="container">
    <div v-html="md"></div>
    <div v-html="$md.render(md2)></div>
  </div>
</template>

<script>
import md from './page.md'

const md2 = 'text {.hoge}'

export default {
  data() {
    return {
      md
    }
  }
}
</script>

出力結果は、前者が<p>text {.hoge}</p>となってしまい、正しくクラス名として認識されておらず、色々と調べてみましたが解決策を見つけることができていません。

後者は正しく<p class="hoge">text</p>となります。

page.mdの中身は下記の通りです。

text {.hoge}

import直後のmdをconsole.logすると、下記のような出力となっていました。
<p>text {.hoge}</p>

どうやら、import時にすでにhtmlに変換されていることが原因だと思うのですが、importしたmdファイルにクラス名を付与する方法はあるのでしょうか。