title: How to bind a click event to a button when component is mounted vue js?
body: <p>I am using a third party app (<a href="https://gs-shop.github.io/vue-slick-carousel/#/example/simple" rel="nofollow noreferrer">vue slick carousel</a>) and I need to bind a click event to below button</p>
  <pre><code>&lt;button type=&quot;button&quot; data-role=&quot;none&quot; class=&quot;slick-arrow slick-next&quot; style=&quot;display: block;&quot;&gt;
      &lt;svg...&lt;/svg&gt;
  &lt;/button&gt;
  </code></pre>
  <p>So everytime I click this button a function gets triggered. This is what I tried in <code>mounted</code> and <code>created</code> life cycle, but didn't bind click event to it.</p>
  <pre><code>// console.log(document.querySelector(&quot;.slick-next&quot;)); // this returns element stated above
  
  document.querySelector(&quot;.slick-next&quot;).addEventListener(&quot;click&quot;, () =&gt; {
    console.log(&quot;Works&quot;);
  });
  </code></pre>
  <p>I tried using <code>setAttribute</code> hoped it works, but it didn't work either.</p>
  <p>Any help is appreciated. Thank you in advance.</p>