title: Fire vue method from jquery on click event
body: <p>I'm trying to append a click event to an already existing dom element.</p>
  
  <pre><code>&lt;div class="logMe" data-log-id="{{ data.log }}"&gt;&lt;/div&gt;
  ...
  &lt;div id="events"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I can't seem to access outside vue methods within my jquery click handler. It will throw <code>logData is not defined</code>.</p>
  
  <pre><code>new Vue({
     el: '#events',
     mounted() {
        $('.logMe').on('click', function() {
             const data = $(this).data('log-id');
             this.logData(data); // throws logData is not defined
        });
     },
     methods: {
        logData(id) {
           console.log(id); // never fires
           ... hit server
        },
     },
  });
  </code></pre>
  
  <p>If anyone knows of a better way to append click events to <code>.html</code> elements that would be great! But how can I bubble up and find my vue methods? <a href="https://jsfiddle.net/pu8pp62v/82/" rel="noreferrer">Here's a fiddle to illustrate</a></p>