title: How can I fire component specific events from within a class in a Vue component?
body: <p>I am trying to integrate <a href="https://fineuploader.com/" rel="nofollow noreferrer">Fine Uploader</a> in my project which is built on Laravel &amp; Vue. This project has a lot of legacy code that I have to support (such as old CSS classes, etc.) so I need to integrate Fine Uploader as a JS plugin, and can't use any <a href="https://github.com/FineUploader/vue-fineuploader" rel="nofollow noreferrer">existing 3rd party Vue Fine Uploader components</a> that may be out there.</p>
  
  <p>I've managed to get it to work for the most part. However, here is the challenge that I present to you. Below, you can see a screenshot of my code, in which I am instantiating the Fine Uploader instance inside my mounted hook.</p>
  
  <p><a href="https://i.stack.imgur.com/tAyVC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tAyVC.png" alt="Screenshot"></a></p>
  
  <p>As you can see I have highlighted the part of the code where I would emit an event when a new file is submitted for uploading. Here however, since I am inside the Fine Uploader instance, when I do this.$emit, it doesn't work (as it shouldn't).</p>
  
  <p>I tried to circumvent this by using a global eventBus. This worked, but created issues when several files are dropped into the uploader at once. The event fires multiple times and often loses track of which event was fired by which instance, thus causing the 'thumbnails component' to perform duplicate actions.</p>
  
  <p>I am convinced that I need to fire 'component-specific' events so that the thumbnail components that are generated and updated (onProgress and onComplete) only take their relevant actions once.</p>
  
  <p>How can I fire component specific events from within another class instantiation?</p>
  
  <p>Thank you.</p>