在更改时从js调用vue函数

Question

我正在尝试从on。（“ change”）事件调用vue方法，该方法工作正常，但尝试将来自change事件的接收数据提供给Vue变量，控制台日志中说该变量具有新数据，但是并不能真正正确地更改该变量，它会在复制组件时更改最后一个变量。

这是我的一些代码：

Vue.component('text-ceditor',{
props:['id'],
  data: function (){
    return {
      dataText: "this is something for example"
    }
  },
  template: '#text-ceditor',
  methods: {
    setData: function(data){
      console.log(data)
      this.dataText = data
      console.log(this.dataText)
    }
  },
  mounted: function(){
    CKEDITOR.replace(this.$refs.text);
    self = this;
    CKEDITOR.instances.texteditor.on('change', function() { 
      self.setData(this.getData())
    })
  }
})

该组件正常工作，但变量仅更改了最后一个

这是小提琴：https://jsfiddle.net/labradors_/3snmcu84/1/