I have a chart like so:

.....
      <div class="flex flex-auto">
        <apexchart
          width="300%"
          height="380"
          type="line"
          :options="optionsLine"
          :series="seriesLine"
        ></apexchart>
.....

And the vue component has a method like so:

    methods: {
      getTraceData: function (data) {
       var esocket = new WebSocket(
        "ws://localhost:5001/provideTraceData?serverHost=" + data
      );
      esocket.onmessage = function (event) {
        var res = JSON.parse(event.data);
        var ts = [];
        var dataLength = res["timeseries"].length;

        console.log(res);
        for (var i = dataLength - 1; i > dataLength - 11; i--) {
          ts.push([
            res["timeseries"][i]["timestamp"],
            res["timeseries"][i]["ttfb"],
          ]);
        }
        console.log("==", ts);

        this.optionsLine = {
          tooltip: {
            shared: false,
            x: {
              formatter: function (val) {
                var date = new Date(val * 1000);
                // Hours part from the timestamp
                var hours = date.getHours();
                // Minutes part from the timestamp
                var minutes = "0" + date.getMinutes();
                // Seconds part from the timestamp
                var seconds = "0" + date.getSeconds();

                // Will display time in 10:30:23 format
                var formattedTime =
                  hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
                return formattedTime;
              },
            },
          },
        };

        this.seriesLine = [
          {
            name: "TTFB",
            data: ts,
          },
        ];
      };
   }
}

From the WebSocket server I get a JSON response, I parse it, etc, etc, and then try to update the chart series. But for some reason, the chart does not seem to render. But when I use a basic HTTP endpoint without WebSocket to get the same data then the chart renders. I'm sort of new javascript, is there some behind the scene async shenanigans happening I'm unaware of? The logic of updating the chart is same, the difference between the HTTP and WebSocket versions is basically the URL string and the event handler, the rest is the same.