How to capture current video screen or thumbnail with vuejs

Hi i want to capture the current video screen and display the result below.

Even i have reference javascript code here https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I though i'm not getting any help to convert it into vue in the form of working code.

Question: i want same(https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I) working code for vue but for single thumbnail

Due to lack of vuejs knowledge i'm not able to display the captured image at the required place

Tried Method 1:

const app = new Vue({
     el:'#app',
     data(){
       return {
          hello:'world'
       }
   },
   methods:{
      capture(){
             alert('captured called');
             let videoCanvas = document.createElement('canvas');
             
         let video = document.getElementById('video')

        videoCanvas.height = video.height;
        videoCanvas.width = video.width;
        videoCanvas.getContext('2d').drawImage(video, 0, 0);
        var snapshot = videoCanvas.toDataURL('image/png');

        var img = new Image();
        
        img.onload = function () {
          document.body.appendChild(this);
        };
        
        img.src = snapshot;
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">

   <video id="video" controls="controls">
      <source        src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
   </video>
   
   <button @click="capture()">Play and Capture</button>
   
   
   <div>------------------Show captured thumbnail below -----------------</div>

    <img src=""/>
   
</div>

Even i tried to convert this code https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I to https://codepen.io/eabangalore/pen/Pojrzax not working

If any of the approach(or solutions among 2) works that would be fine for me

Tried Method 2:

const app = new Vue({
     el:'#app',
      data() {
    return {
     canvas:''
    };
  },
  methods: {
    capture(video, scaleFactor) {
        if(scaleFactor == null){
            scaleFactor = 1;
        }
        var cx =0;
        var cy=0;
        
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
            canvas.width  = w * 2;
            canvas.height = h * 0.5;
            
        var ctx = canvas.getContext('2d');
            ctx.drawImage(video, cx, cy, 50, 50);
            ctx.font = '14pt, sans-serif';
            
        return canvas;
    } ,

      displayThumbnail(){
            let video = document.querySelector(`#video`);
            console.log('video',video);
            let scaleFactor = 0.25;
            this.canvas = this.capture(video, scaleFactor);
            console.log('this.canvas',this.canvas);
       }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>



  <div id="app">

   <video id="video" controls="controls">
      <source        src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
   </video>
    
    <button @click="displayThumbnail()"> Capture</button>
    
   <div>----------------------- show captured thumbnail below -----------------------------------</div>
    
<div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;width:100%" v-html="canvas"></div>
  
  </div>

Please help me thanks in advance !!!

from How to capture current video screen or thumbnail with vuejs