VueJs TinyMCE directive

TinyMceDirective.js

<script>
module.exports = {

    twoWay: true,

    bind: function() {
      var self = this;
      var IDattr = self.el.getAttribute('id')

      console.log("TinyMCEDirective.bind  IDattr="+IDattr)

      console.log("========== JQUERY val=", $('#ideaDescription').val())    // returns undefined,  el is not yet in the DOM ??

      Vue.nextTick(function() {     // this does not work.  Vue seems to be unknown in a directive
            console.log("========== TinyMCEDirective.nextTick el.val=", $('#ideaDescription').val())

            tinymce.init({
              selector: '#'+IDattr,
              setup: function(editor) {
                console.log("tinymce.setup editor="+editor)

                editor.on('init', function() {
                  console.log("TinyMCEDirective.editor.on(init) this=", this, " self=",self)
                  tinymce.get('editor').setContent(self.value);
                });

                // when typing keyup event
                editor.on('keyup', function() {
                  // get new value
                	var new_value = tinymce.get('editor').getContent(self.value);
                  // set model value
                  self.set(new_value)
                });
              }

            })
            .then(function(editors) {
              console.log("TinyMCEDirective.init.then() editors=", editors)
            })
            .catch(err => {
              console.err("TinyMCEDirective ERROR: ", err)
            });


      })
    },

    update: function(newVal, oldVal) {
      console.log("tinymce update newVal="+newVal)
      // set val and trigger event
      $(this.el).val(newVal).trigger('keyup');
    },

    unbind: function() {
      console.log("tinymce unbind")
      tinymce.remove('#' + this.el.getAttribute('id'))
    }

}
</script>