title: VueJS with normal JavaScript
body: <p>I want to add count down timer to my vue component. I have found a script which is written in normal JavaScript. 
  this is my JavaScript file.</p>
  
  <pre><code>var upgradeTime = 7200;
  var seconds = upgradeTime;
  function timer() {
     var days        = Math.floor(seconds/24/60/60);
     var hoursLeft   = Math.floor((seconds) - (days*86400));
     var hours       = Math.floor(hoursLeft/3600);
     var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
     var minutes     = Math.floor(minutesLeft/60);
     var remainingSeconds = seconds % 60;
     if (remainingSeconds &lt; 10) {
         remainingSeconds = "0" + remainingSeconds;
     }
     document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
     if (seconds == 0) {
         clearInterval(countdownTimer);
         document.getElementById('countdown').innerHTML = "Completed";
     } else {
         seconds--;
     }
  }
  var countdownTimer = setInterval('timer()', 1000);
  </code></pre>
  
  <p>I stored this as a <strong>clock.js</strong> in my vue js projects src folder.
  How do I import this <strong>clock.js</strong> file to my vue component and get the output.</p>
  
  <p>for this JavaScript code normal way to get output would be something like this</p>
  
  <pre><code>&lt;span id="countdown" class="timer"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But how do I get an output inside a vue component.
  I'm junior developer and I haven't clear idea about how to use normal JavaScript inside vue. I hope you understand my question.
  Thank you</p>