Vue.jsの中でcreatejsを使って描画をする方法

Question

canvas要素にv-preディレクティブを使えばcreatejsを使っても描画できると思ったのですが、うまくいかず...

思いついた方法が、

• canvasをvueの要素の外側にだす。
• vueのインスタンス作成した後にcanvas要素を追加。

ですが、描画はできてもvueの資源をcanvas要素に使えなくなってしまいます(v-attr等)。
見落としているvueの仕組みや、共存できないのであれば他にもっといいやり方があるのではないかと思い質問させていただきました。

下のコードはstageにデータは入っても描画されないコードです。

<div id="my-app">
  <canvas v-pre id="my-canvas" width="100" height="100"></canvas>
  <button @click="addText">T</button>
</div>

const stage = new createjs.Stage('my-canvas');
createjs.Ticker.addEventListener('tick', stage);
    
new Vue({
  el: '#my-app',
  methods: {
    addText: function() {
      const newText = new createjs.Text('text');
      stage.addChild(newText);
    }
  }
});

Answer 1

$elが作成された後に$elを使ってステージを作成すれば共存できた。mounted

<div id="my-app">
  <canvas :width="w" :height="h" :style="style"></canvas>
  <button @click="addText">T</button>
</div>

new Vue({
  el: '#my-app',
  data: {
    w: 100,
    h: 200,
    style: {
      background: '#aaa'
    }
  },
  mounted: function() {
    this.stage = new createjs.Stage(this.$el.firstChild);
    createjs.Ticker.addEventListener('tick', this.stage);
  },
  methods: {
    addText: function() {
      const newText = new createjs.Text('text');
      this.stage.addChild(newText);
    }
  }
});