Binance get spread

Binance.vue

<template></template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  data() {
    return {
      baseName: "eosusdt",
      quoteName: "btcusdt",
      timeframe: "1m",
      lastBaseKline: {
        o: 0, c: 0, h: 0, l: 0, t: 0
      },
      lastQuoteKline: {
        o: 0, c: 0, h: 0, l: 0, t: 0
      },
    };
  },
  mounted() {
    console.log("Mounted");

    this.getKlines();
  },
  computed: {
    livePairKline(): Object {
      return {
        t: this.lastBaseKline.t,
        o: this.lastBaseKline.o / this.lastQuoteKline.o,
        c: this.lastBaseKline.c / this.lastQuoteKline.c,
        h: this.lastBaseKline.h / this.lastQuoteKline.h,
        l: this.lastBaseKline.l / this.lastQuoteKline.l,
      }
    }
  },
  watch: {
    livePairKline(value, oldValue) {
      console.log(value);
    }
  },
  methods: {
    getKlines() {
      let self = this;

      let binanceSocket = new WebSocket(
          `wss://fstream.binance.com/stream?streams=${this.baseName}@kline_${this.timeframe}/${this.quoteName}@kline_${this.timeframe}`
      );

      binanceSocket.onopen = function () {
        console.log("Binance connected...");
      };

      binanceSocket.onmessage = function (event) {
        try {
          let kline = JSON.parse(event.data);
          if (kline.data.s === self.baseName.toUpperCase()) {
            self.lastBaseKline = kline.data.k
          }
          if (kline.data.s === self.quoteName.toUpperCase()) {
            self.lastQuoteKline = kline.data.k
          }
        } catch (e) {
          console.log(e);
        }
      };

      binanceSocket.onclose = function () {
        console.log("Binance disconnected...");
      };
    },
  },
});
</script>