Using wheelnav.js on Vue 3 project

Question

So I have seen this pie menu generator which gives you an HTML, CSS and JS code and I wanted to use it in my Vue 3 project. I am new to vue and this was how I imported it.

here is the link to the pie menu generator: http://pmg.softwaretailoring.net/

I did this in my wrapper component. Somehow this bought many errors in which I think is because of how I imported the JS library.

<template>
    <div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close">
        <div id='piemenu' data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-marker
            data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='270'
            data-wheelnav-cssmode data-wheelnav-init>
            <div data-wheelnav-navitemtext='0' onmouseup='alert("Place your logic here.");'></div>
            <div data-wheelnav-navitemtext='1' onmouseup='alert("Place your logic here.");'></div>
        </div>
    </div>
</template>

<script>
import '../assets/raphael.min.js'
import '../assets/raphael.icons.min.js'
import '../assets/wheelnav.min.js'

var piemenu = new wheelnav('piemenu');
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.createWheel();

export default {
    name: 'CmpContextMenu',
    props: {
        display: Boolean, // prop detect if we should show context menu
    },
    data() {
        return {
            left: 0, // left position
            top: 0, // top position
            show: false, // affect display of context menu
        };
    },
    computed: {
        // get position of context menu
        style() {
            return {
                top: this.top + 'px',
                left: this.left + 'px',
            };
        },
    },
    methods: {
        // closes context menu 
        close() {
            this.show = false;
            this.left = 0;
            this.top = 0;
            this.myTrigger = false;
            console.log('trigger false');
        },
        open(evt) {
            this.show = true;
            // updates position of context menu 
            this.left = evt.pageX || evt.clientX;
            this.top = evt.pageY || evt.clientY;
        },
    },
};
</script>

<style>
.context-menu {
    position: fixed;
    z-index: 999;
    cursor: pointer;
}

#piemenu>svg {
    width: 100%;
    height: 100%;
}

#piemenu {
    height: 400px;
    width: 400px;
    margin: auto;
}

@media (max-width: 400px) {
    #piemenu {
        height: 300px;
        width: 300px;
    }
}

[class|=wheelnav-piemenu-slice-basic] {
    fill: #497F4C;
    stroke: none;
}

[class|=wheelnav-piemenu-slice-selected] {
    fill: #497F4C;
    stroke: none;
}

[class|=wheelnav-piemenu-slice-hover] {
    fill: #497F4C;
    stroke: none;
    fill-opacity: 0.77;
    cursor: pointer;
}

[class|=wheelnav-piemenu-title-basic] {
    fill: #333;
    stroke: none;
}

[class|=wheelnav-piemenu-title-selected] {
    fill: #fff;
    stroke: none;
}

[class|=wheelnav-piemenu-title-hover] {
    fill: #222;
    stroke: none;
    cursor: pointer;
}

[class|=wheelnav-piemenu-title]>tspan {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 24px;
}

.wheelnav-piemenu-marker {
    stroke: #444;
    stroke-width: 2;
}
</style>