title: How to include a local JS file into Vue template
body: <p>I want to import a JS file to be run along with a template in browser. I tried <a href="https://stackoverflow.com/questions/55530604/how-to-include-local-script-files-in-vue">this</a>, but it didn't work because I need everything loaded before my script can run. </p>
  
  <p>Let me show you the problematic vue file:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="canvaspage"&gt;
  
          &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
          &lt;div id="buttonlist"&gt;
              &lt;h5&gt;Select your action:&lt;/h5&gt;
              &lt;div class="col"&gt;
                  &lt;button id="btn1"&gt;JS file custom action 1&lt;/button&gt;
                  &lt;button id="btn2"&gt;JS file custom action 2&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'CanvasPage'
  }
  &lt;/script&gt;
  ...
  </code></pre>
  
  <p>See that canvas and buttons on template? I want to interact with it using pure JS.</p>
  
  <p>Here is an example of what the JS file is trying to do:</p>
  
  <pre><code>let canvas = document.getElementById('canvas')
  let button1 = document.getElementById('btn1')
  let button2 = document.getElementById('btn2')
  
  canvas.addEventListener('click', () =&gt; {
      console.log('Canvas clicked')
  })
  
  button1.addEventListener('click', () =&gt; {
      console.log('Button 1 clicked')
  })
  
  button2.addEventListener('click', () =&gt; {
      console.log('Button 2 clicked')
  })
  </code></pre>
  
  <p>If I try the solution linked above, what happens is that 'canvas', 'button1' and 'button2' are all null, because JS cannot find them. How can I make it work on Vue?</p>