How to use @stomp/stompjs in vue2

Question

I tried to solve it on my own, but it wasn't easy. I'm working on a vue2 project. I installed the @stomp/stompjs library to communicate with an external websocket API. And this WebSocket API requires a custom header value when connecting. I tried implementing it by looking at the docs, but the status becomes finished as soon as pending. How can we solve this?

I don't know if this is the cause, but the initiator in developer mode: network is giving this message. Could not load content for webpack://cktest/src/client.ts?aa97 (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

Below is the code I wrote.

<template>
  <div>
    <div>
      <button @click="stomptest"> connect</button>
      <button @click="stompclose"> close</button>
    </div>
  </div>

</template>

<script>

import { Client } from '@stomp/stompjs';

export default {

  name: 'App',
  components: {
  },
  data(){
    return {
      StompClient: null,
    }
  },
  mounted() {

  },
  beforeMount() {

  },
  methods: {
    stomptest(){
      this.StompClient = new Client({
        brokerURL: 'wss://loki.test.shop/loki/api/v1/tail?query={app="test-api"}',
        connectHeaders: {
          'X-Scope-OrgID': 'tes'
        },
        debug: function (str){
          console.log(str)
        }
      })

      this.StompClient.onConnect = function (frame){
        console.log('connection')
        console.log(frame)
      }

      this.StompClient.onStompError = function (frame){
        console.log('Broker reported error: ' + frame.headers['message']);
        console.log('Additional details: ' + frame.body);
      }

      this.StompClient.activate();
    },
    stompclose(){
      this.StompClient.deactivate();
    },
  }
}



</script>

<style>


</style>