At the moment, I am working on a Vue 3 (Composition API) + Typescript. This project is supposed to simulate a football game. I use an HTML 5 canvas to draw the field, the lines and the ball. However, I don’t want the players to simply be a bunch of colored circles, I need them to be actual Vue components with state and “onClick” events.
How could I achieve this?

The canvas element in the Field.vue file

<canvas ref="canvas" class="football-field"> </canvas>

The Bot.vue file (players are robots)

<script setup lang="ts">
import type { XY } from "../types";

interface Props {
  width: number;
  height: number;
  color: string;
  offset: XY;
}

const props = defineProps<Props>();

const showDetails = (): void => {
  console.log("Test");
};
</script>

<template>
  <div
    class="bot"
    @click="showDetails"
    :style="{
      height: props.height + 'px',
      width: props.width + 'px',
      backgroundColor: props.color,
      top: props.offset[0] + 'px',
      left: props.offset[1] + 'px',
    }"
  ></div>
</template>

<style scoped>
.bot {
  position: absolute;
  border-radius: 50%;
}
</style>