mediapipe solution api pose detection VueJS

Question

I want to use mediapipe in Vue.js to detect human pose, I have tried to replicate this example using Vue.js, but I didn't succeed, can you please tell me how can I do it? thanks in advance.

P.S: I didn't understand well where the results is defined first in the original script!

My Code:

import { Pose, POSE_CONNECTIONS, LandmarkGrid, PoseConfig } from '@mediapipe/pose'
import { Camera } from "@mediapipe/camera_utils";
import { drawConnectors, drawLandmarks } from "@mediapipe/drawing_utils";

const App = {
  name: "App",
   data() {
return {
  ctx: null,
  width: null,
  height: null,
};
  },
  mounted() {
this.videoElement = document.getElementsByClassName("input_video")[0];
this.canvasElement = document.getElementsByClassName("output_canvas")[0];
this.canvasCtx = this.canvasElement.getContext("2d");
this.landmarkContainer = document.getElementsByClassName(
  "landmark-grid-container"
)[0];
this.grid = new LandmarkGrid(this.landmarkContainer);
this.init();
  },
  methods: {
init() {
  this.canvasCtx.save();
  this.canvasCtx.clearRect(
    0,
    0,
    this.canvasElement.width,
    this.canvasElement.height
  );
  this.canvasCtx.drawImage(
    this.results.segmentationMask,
    0,
    0,
    this.canvasElement.width,
    this.canvasElement.height
  );

  // Only overwrite existing pixels.
  this.canvasCtx.globalCompositeOperation = "source-in";
  this.canvasCtx.fillStyle = "#00FF00";
  this.canvasCtx.fillRect(
    0,
    0,
    this.canvasElement.width,
    this.canvasElement.height
  );

  // Only overwrite missing pixels.
  this.canvasCtx.globalCompositeOperation = "destination-atop";
  this.canvasCtx.drawImage(
    this.results.image,
    0,
    0,
    this.canvasElement.width,
    this.canvasElement.height
  );

  this.canvasCtx.globalCompositeOperation = "source-over";
  drawConnectors(canvasCtx,  this.results.poseLandmarks, POSE_CONNECTIONS, {
    color: "#00FF00",
    lineWidth: 4,
  });
  drawLandmarks(canvasCtx,  this.results.poseLandmarks, {
    color: "#FF0000",
    lineWidth: 2,
  });
  this.canvasCtx.restore();

  this.grid.updateLandmarks(this.results.poseWorldLandmarks);

  const pose = new Pose({
    locateFile: (file) => {
      return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
    },
  });

  pose.setOptions({
    modelComplexity: 1,
    smoothLandmarks: true,
    enableSegmentation: true,
    smoothSegmentation: true,
    minDetectionConfidence: 0.5,
    minTrackingConfidence: 0.5,
  });

  pose.onResults(this.onResults);

  const camera = new Camera(this.videoElement, {
    onFrame: async () => {
      await pose.send({ image: this.videoElement });
    },
    width: 1280,
    height: 720,
  });
  camera.start();
},
onResults(results) {
  if (!results.poseLandmarks) {
    this.grid.updateLandmarks([]);
    return;
  }
},
  },
};

Vue.createApp(App).mount('#app');

<div id="app">
  <div class="container">
    <video class="input_video"></video>
    <canvas class="output_canvas" width="1280px" height="720px"></canvas>
    <div class="landmark-grid-container"></div>
  </div>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d/control_utils_3d.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js" crossorigin="anonymous"></script>