title: Using DOMElement.addEventListener within Vue component is capturing preceding event
body: <p>I have a <code>Vue</code> component which within its <code>created</code> lifecycle method adds an event listener to the document to capture any clicks that are outside of root <code>$el</code>. Let's call this <code>Popup</code></p>
  
  <p>When I click an element which summons and mounts the above <code>Popup</code>, the document click event is immediately captured. </p>
  
  <p>Here is a jsfiddle with simplified code: <a href="https://jsfiddle.net/awei01/5vuqjcxd/" rel="nofollow noreferrer">https://jsfiddle.net/awei01/5vuqjcxd/</a></p>
  
  <p>And, in contrast, here is a pure js version which correctly binds the click event: <a href="https://jsfiddle.net/awei01/qzqku0w9/" rel="nofollow noreferrer">https://jsfiddle.net/awei01/qzqku0w9/</a></p>
  
  <p>As a cross reference, here is the vue forums post: <a href="https://forum.vuejs.org/t/document-addeventlistener-captures-a-click-preceding-listeners-creation/11558" rel="nofollow noreferrer">https://forum.vuejs.org/t/document-addeventlistener-captures-a-click-preceding-listeners-creation/11558</a></p>
  
  <p>Any insight is appreciated. </p>