Рисование на холсте с помощью vue.js

Я не думаю, что это обязательно проблема Vue, но я столкнулся с некоторыми проблемами.

Я хотел бы написать на холст переменную Vue. Если я удаляю vue, мой исходный код работает нормально, однако, если я добавляю Vue, холст фактически не запускается.

Вот мой код

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

var v = new Vue({
  el: '#app',
  data: {
    'exampleContent': 'This is TEXT'
  },
  watch: {
    exampleContent: function(val, oldVal) {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "black";
      ctx.font="20px Georgia";
      ctx.fillText(this.exampleContent,10,50);
    }
  }
});

Если я закомментирую/* var v = new Vue({ ... начальный бит работает. Если я регистрирую значениеexampleContent в наблюдателе, который также работает. Но что-то в холсте не работает.

Демо для игры:http://codepen.io/EightArmsHQ/pen/EgGbgR?editors=1010

Ответы на вопрос(3)

Ваш ответ на вопрос