[BUG]: Device and Call insights not compatible with Vue3/Nuxt3

[corbinu]

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

<template>
  <button @click="handleStartupDeviceButton">
    Start up the Device
  </button>
  <button :disabled="showOutgoingCallCallButton" @click.prevent="handleOutgoingCallCallButton"
    type="submit">Call</button>
</template>

<script lang="ts" setup>
import { Call, Device } from "@twilio/voice-sdk";

const device = ref<Device | null>(null);
const outgoingCall = ref<Call | null>(null);
const showOutgoingCallCallButton = ref(false);

function log(message: string) {
  console.log(`Event Log: ${message}`);
}

async function handleStartupDeviceButton() {
  try {
    let { token } = await $fetch("/api/token");
    device.value = new Device(token);

    // Device must be registered in order to receive incoming calls
    device.value.register();

  } catch (err) {
    console.log(err);
    log("An error occurred. See your browser console for more information.");
  }
}

async function handleOutgoingCallCallButton() {
  var params = {
    To: "INPUT OUTGOING NUMBER HERE TO TEST", // PLEASE FILL THIS IN
  };

  if (device.value) {
    log(`Attempting to call ${params.To} ...`);

    outgoingCall.value = await device.value.connect({ params });

    outgoingCall.value.on("accept", () => {
      log("Call in progress ...");
      showOutgoingCallCallButton.value = true;
    });

    const onDisconnectCall = () => {
      log("Call disconnected.");
      showOutgoingCallCallButton.value = false;

      outgoingCall.value = null;
    };
    outgoingCall.value.on("disconnect", onDisconnectCall);
    outgoingCall.value.on("cancel", onDisconnectCall);
  } else {
    log("Unable to make call.");
  }
}
</script>

Expected behavior:

Calls place and work as when not wrapped a vue ref.

Actual behavior:
Call and Device are fine if not wrapped in a Vue ref, but once wrapped the proxy both break with the same error when trying to report insights.

@twilio_voice-sdk.js?v=fddf3598:3155 Uncaught (in promise) TypeError: 'get' on proxy: property '_log' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Log2>' but got '#<Log2>')
    at Proxy._post (@twilio_voice-sdk.js?v=fddf3598:3155:14)
    at Proxy.post (@twilio_voice-sdk.js?v=fddf3598:3179:19)
    at Proxy.info (@twilio_voice-sdk.js?v=fddf3598:3185:19)
    at new Call2 (@twilio_voice-sdk.js?v=fddf3598:11631:23)
    at Proxy.<anonymous> (@twilio_voice-sdk.js?v=fddf3598:10423:26)
    at step (@twilio_voice-sdk.js?v=fddf3598:9563:21)
    at Object.next (@twilio_voice-sdk.js?v=fddf3598:9515:18)
    at fulfilled (@twilio_voice-sdk.js?v=fddf3598:9487:28)

TODO

Software versions:

• Browser(s):
  Latest Chrome and Firefox
• Operating System: Ubuntu 24.04
• twilio.js: "@twilio/voice-sdk": "^2.11.2"
• Third-party libraries (e.g., Angular, React, etc.):
  Vue3/Nuxt3

[charliesantos]

@corbinu , what happens if you try to import using the esm path?

// import { Call, Device } from "@twilio/voice-sdk";
import { Call, Device } from "@twilio/voice-sdk/esm";