Vue.jsでv-bindが展開されない

Question

前提・実現したいこと

svgのpath要素にv-bindを使ってclassを切り替えたいと考えています。

ここに質問の内容を詳しく書いてください。

# isActiveがtrueの前提
<div v-bind:class={ hoge: isActive } ></div>

通常上記の様にclassバインディングし、{hoge: isActive}と記述した場合にisActiveがtrueだった場合

<div class="hoge"></div>

上記のように展開されるかと思います。
今回svgのpath要素のclassをバインディングした際、期待した動作が得られずデベロッパーツールで確認した所

<path v-bind:class="{hoge: isActive}"  .../>

上記の様な形で式展開されないままhtmlの要素として定義されてしまっていました。

試したこと

また、htmlはslimで記述しています。

<g>
　path v-bind:class="{hoge: isActive}"  .../
</g>

上記のような形でjsの処理が含まれていない箇所に関してはテキストとしてエスケープを行っています。
slimでエスケープされた要素の中でv-bindしようとすると式が展開されません。。
どのように記述するのが正しいのでしょうか。ご教示頂けると幸いです。
よろしくお願い致します。

Answer 1

<path v-bind:class="{hoge: isActive}"  .../>

ですが、

<path v-bind:class="{'hoge': isActive}"  .../>

を試してみて下さい。サンプルも置いておきます。

https://plnkr.co/edit/1wKUqP8Y28DpAMeT8hsS?p=preview

Comments

[tukkun]

ご回答頂きありがとうございます！
ご回答いただいた内容で試してみたのですが、結果は変わらず粘ってみた所キャッシュがきいていた為変更が反映されていないようでした。。

ご回答いただきありがとうございました。