title: Tinymce insert/edit image fields on pop up are not editable(focused) inside vuetify's dialog
body: <p>I am aware with the tweaks required for enabling focus inside the tinymce pop up when in bootstrap modal. 
  But currently I am working with a vuetify dialog. Which does'nt seem to focus the pop up fields of tinymce.
  <a href="https://i.stack.imgur.com/AIhsE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AIhsE.png" alt="The focus is in the pop behind the tinymce dialog"></a></p>
  
  <p>I have gone through this question but it does not work in context to vuetify
  <a href="https://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable">TinyMCE 4 links plugin modal in not editable</a></p>
  
  <p>Below is my code I have removed some methods just for clean up and have kept basic things that I have tried in mounted event &amp; editor init.</p>
  
  <pre><code>  &lt;no-ssr placeholder="Loading Editor.."&gt;
      &lt;tinymce
        id="content"
        :toolbar2="toolbar2"
        :toolbar1="type=='BASIC'?'':toolbar1"
        :plugins="plugins"
        :other_options="other_options"
        v-model="content"
        @input="handleInput"
        v-on:editorInit="initCallBack"
      /&gt;
    &lt;/no-ssr&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  //https://dyonir.github.io/vue-tinymce-editor/?en_US
  export default {
    props: {
      value: { type: String },
      type: { type: String }
    },
    data() {
      return {
        content: this.value,
        plugins: this.getPlugins(),
        toolbar2: "",
        toolbar1: this.getToolbar1(),
        other_options: {
          menubar: this.getMenubar(),
          height: "320",
          file_browser_callback: this.browseFile,
          auto_focus: '#content'
        }
      };
    },
    mounted(event) {
      // window.tinyMCE.activeEditor.focus();
      // window.tinymce.editors["content"]
      console.log(this.$el, event);
      let list=document.getElementsByClassName("mce-textbox");
      for (let index = 0; index &lt; list.length; ++index) {
      list[index].setAttribute("tabindex", "-1");
  }
      //     if ((event.target).closest(".mce-window").length) {
      //     e.stopImmediatePropagation();
      // }
      // this.$refs.refToElement ..$el.focus())
      // this.el.addEventListener('focusin', e =&gt; e.stopPropagation());
    },
    methods: {
      handleInput(e) {
        this.$emit("input", this.content);
      },
      initCallBack(e) {
        window.tinymce.editors["content"].setContent(this.value);
        window.tinymce.editors["content"].getBody().focus();
  // console.log(this.$refs);
  //       const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
  //         focusable.length &amp;&amp; focusable[0].focus()
  
        document.getElementById("content").addEventListener("onfocusin", console.log("fucssed"));
        // tinymce.activeEditor.fire("focus");
  
  this.$el.querySelector(".mce-tinymce").addEventListener('focusin', e =&gt;{ e.stopImmediatePropagation();console.log('event',e)});
  
        const element = this.$el.querySelector(".mce-tinymce");
        let _this=this;
        if (element)
          this.$nextTick(() =&gt; {
            element.focus();
            console.log("FOCUSED",element,_this);
            // element.stopImmediatePropagation();
          });
        // window.tinyMCE.activeEditor.focus();
  
        //   console.log(this.$el,e);
        //     if ((e).closest(".mce-window").length) {
        //     e.stopImmediatePropagation();
        // }
      }
  };
  &lt;/script&gt;```
  
  
  I am using the component : https://github.com/dyonir/vue-tinymce-editor
  But fields of the pop are not getting focussed/edited.
  </code></pre>