Vue.jsでインスタンス外からの変更を管理下に入れる

Vue.js外から取得した値を管理下に入れる方法です
例えば単純にjQueryなどで値を取得した際も使えますし
ECCUBEでcontrollerから受け取った値なんかも(jQueryを介して)管理下に入れることできます

index.html

<div id="app" class="baz">
  <p>{{ foo }}</p>
  <p>{{ bar }}</p>
</div>

app.js

var app = new Vue({
  el: '#app',
  data: {
    foo: 'ふー',
    bar: ''
  },
  mounted: function () {
    this.bar =  $('#app').attr('class');
  },
})

dataに登録して初期値を空にしておきます。
実際のサンプルはこちら

他の言語やサービスに依存しないといけない場合こそ使える

上記コードだと:class使えば管理下に入るじゃねーかという話なんですが、それが使えない場面ってCMSやEC系のサービスだと結構あるんですよね
僕の場合はECCUBEで役に立ちました。

detail.twig

.
.
<!--▼商品タグ-->
<div id="product_tag_box" class="product_tag">
    {% for ProductTag in Product.ProductTag %}
        <span id="product_tag_box__product_tag--{{ ProductTag.Tag.id }}" class="product_tag_list">{{ ProductTag.Tag }}</span>
    {% endfor %}
</div>
<hr>
<!--▲商品タグ-->
.
.

実際に利用した場面ではないですが。。。
例えば商品についているタグのidをとってくるコード{{ ProductTag.Tag.id }}を含んだidを管理下に入れたいなってときに上記方法が利用できます。

やってることはシンプルなので知ってて当然なことかもしれませんが、jQueryを切り離せない、でもVue.jsも使っていきたいという人にとっては使えるかなと思います

ただ試行錯誤の末にたどり着いた力技だったので正攻法ではない気がしますw
欠点はdataが膨らんでくるので量が多いとなかなか悲惨です

こうやればもっとスマートだよっていうのがあればぜひ教えてください！