How to catch Jquery event from vue.js

https://jsfiddle.net/wx84na32/2/ Please check the fiddle this is complete example what you want. HTML

<button id="testBtn">Trigger an event</button>
<div id="app">
<div v-show="this.show">
1st Argument of Custom Event <br />
"{{ one }}"
<br />
2nd Argument of Custom Event <br />
"{{ two }}"
<br />
A complete event object below <br />
{{ event }}
</div>
</div>

Javascript / jQuery / Vue

//jQuery

$('#testBtn').on("click", function(event) {
    console.log(this, 'this');
  $(this).trigger("custom", ["1st", "2nd"]);
});

//vue.js


new Vue({
  el: '#app',
    mounted () {

    let _this = this;

    $(document).on("custom", function(event, one, two) {

        console.log(event, 'event');
      console.log(one, 'one');
      console.log(two, 'two');

      _this.event = event;
      _this.one = one;
      _this.two = two;

      _this.show = true;

    });
  },
  data () {
    return {
        show : false,
        event : {},
      one : '',
      two : ''
    }
  }
});

[https://jsfiddle.net/wx84na32/2/]

jQuery uses it's own event system. You cannot catch events emitted from jQuery with Vue, you have to catch them with jQuery and call Vue from the handler.

new Vue({
  el: "#app",
  data:{
    iframeSource: $("template").html()
  },
  methods:{
    onMouseover(event){
      alert(`Top: ${event.top}, Left: ${event.left}`)
    }
  },
  mounted(){
    $("body").on("mouseover-highlight", this.onMouseover)    
  },
  beforeDestroy(){
    $("body").off("mouseover-hightlight", this.onMouseover)
  }
})

Here is an example of it working.

Note: when adding events with something other than Vue, you should manage removing them yourself, especially if you are adding it in a component. Components are created/destroyed more than once and you don't want to end up with multiple handlers.