Utilizando outros frameworks JS com o Vue | Vue.js parte 1: construindo Single Page Applications

Eu utilizo o framework https://p5js.org/reference/ onde nele é possível criar animações através de um canvas.

Para utiliza-lo basta referenciar o JS no <head> da página:

<head>
    <script src="src/p5.min.js"></script>
    <script src="sketch.js"></script>
</head>

O p5.min.js é a biblioteca e o sketch.js é meu arquivo principal, onde o canvas é criado.

function setup() {
    createCanvas(480, 480); // Cria o canvas definindo seu tamanho
    fill('red'); // Altera o *fill* para vermelho
    ellipse(width / 2, height / 2, 10, 10); // Desenha um círculo de 10px de diâmetro no centro do canvas
}

Há casos onde crio outros arquivos JS, como classes, e para utiliza-los basta referenciar novamente no <head>

<!-- index.html -->
<head>
    <script src="src/p5.min.js"></script>
    <script src="sketch.js"></script>
    <script src="meu-objeto.js"></script>
</head>

// meu-objeto.js
class MeuObjeto {
    constructor(tam) {
        this.size = tam;
    }

    desenha() {
        fill('red');
        ellipse(width / 2, height / 2, this.size, this.size);
    }
}

// sketch.js
function setup() {
    createCanvas(480, 480);
    let obj = new MeuObjeto(10);
    obj.desenha();
}

A questão é, esse workflow não serve para se trabalhar com componentes no Vue. Minha dúvida portanto é como posso usar essa biblioteca, colocando o canvas em algum componente da página.

Aliás, não somente para esse framework, mas para qualquer outro ou até arquivo JS, como importa-los no Vue?