How to get Twilio Video API working in VueJS - vue.js

Question

I have followed through the following post on how to set up Twilio video API with javascript: https://www.twilio.com/docs/video/tutorials/get-started-with-twilio-video-node-express-server
This works fine but I am now running into problems trying to convert this code to work with VueJS. Everything seems to run and I see the HTML appended for the audio and video, however no video element appears on the page. How do I fix this
This is the code I have written/adapted
<script setup>
import {ref} from "vue";
const isFormVisible = ref(true);
const roomName = ref("");
const participants = ref([]);
import Twilio, { connect, createLocalTracks, createLocalVideoTrack } from 'twilio-video'
const startRoom = async (event) => {
console.log('started');
isFormVisible.value = false;
const response = await fetch("http://localhost:3000/join-room", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ roomName: roomName.value }),
});
const { token } = await response.json();
console.log(token);
// join the video room with the token
const room = await joinVideoRoom(roomName.value, token);
// render the local and remote participants' video and audio tracks
handleConnectedParticipant(room.localParticipant);
room.participants.forEach(handleConnectedParticipant);
room.on("participantConnected", handleConnectedParticipant);
room.on("participantDisconnected", handleDisconnectedParticipant);
window.addEventListener("pagehide", () => room.disconnect());
window.addEventListener("beforeunload", () => room.disconnect());
}
const handleDisconnectedParticipant = (participant) => {
// stop listening for this participant
participant.removeAllListeners();
// remove this participant's div from the page
//const participantDiv = document.getElementById(participant.identity);
//participantDiv.remove();
};
const handleConnectedParticipant = (participant) => {
// create a div for this participant's tracks
participants.value.push(participant);
// iterate through the participant's published tracks and
// call `handleTrackPublication` on them
participant.tracks.forEach((trackPublication) => {
handleTrackPublication(trackPublication, participant);
});
// listen for any new track publications
participant.on("trackPublished", handleTrackPublication);
};
const handleTrackPublication = (trackPublication, participant) => {
function displayTrack(track) {
// track.attach creates an HTMLVideoElement or HTMLAudioElement
// (depending on the type of track) and adds the video or audio stream
if(!participant.track) {
participant.track = track.attach().outerHTML;
}
else {
participant.track += track.attach().outerHTML;
}
console.log(track.attach().outerHTML);
console.log(track.attach());
}
// check if the trackPublication contains a `track` attribute. If it does,
// we are subscribed to this track. If not, we are not subscribed.
if (trackPublication.track) {
displayTrack(trackPublication.track);
}
// listen for any new subscriptions to this track publication
trackPublication.on("subscribed", displayTrack);
};
const joinVideoRoom = async (roomName, token) => {
// join the video room with the Access Token and the given room name
let connectOptions = {
name: roomName,
// logLevel: 'debug',
audio: true,
video: { width: 400 }
};
const room = await Twilio.connect(token, connectOptions);
return room;
};
</script>