RailsのslimでVue.jsのv-bind:class="foo:bar"を使うとinvalid expressionと言われる

Question

以下のようなコードを書いています。

Slim

label for="arubaito_ex_job_offer_entry_form_station_id" class="control-label required" v-bind:class='{text-danger:stationExists}'
...

$ ->
  new Vue(
    ...
    data: {
      stationExists: true
    }
    methods: {
      switchStation: ->
            stationExists = !@.$data.stations.length == 0
    }
  )

で適当なタイミングでswitchStation()が発動するのですが、
ブラウザのコンソールでinvalid expression: v-bind:class='{text-danger:stationExists}
と言われて表示されません、、
そもそも問題の切り分けが不確かなのですが、HTML(Slim)の構文エラーなのか、JS側のバグの可能性もあるのかわかっていませんが、何か違わないかチェックしていただけると嬉しいです。

追記:
こちらはVue1.xならv-bind:class='{'text-danger':stationExists},
2.xならv-bind:class='{'text-danger':stationExists}というように記法が分かれているのでしょうか？

Comments

[moke]

ちょっとわからないのですが、vueは直にいれたものですか?
Railsのversionとvueの導入方法、
invalid expression: v-bind:class='{text-danger:stationExists}が出るタイミング
について（描画時かswitchStation()発動時か）教えてください

[namenamenameko]

すみません、gem vue-railsを使用しており、rails5.0、vueは2.2.1と書いてあります。エラーは描画時に表示されページ全体が表示されませんでした。が、自己解決してしまいました。

Answer 1

v-bind:class="{'text-danger':stationExists}"

のようにクラス名に' 'をつけたところ解決してしまいました。
vue-railsの中でvueのバージョンが2.2.1となっており、ドキュメントではこちらは1.xの書き方となっているので混乱しましたが・・・