Display of image sequences in Webbrowser using VueJs

I am developing a web frontend using VueJs for the ui part and a python flask server to provide data.
Communication between the two works with axios.

One main task of the frontend is to display images (one at a time, but with high frequency).
The images are provided via zmq. The VueJs makes a request to the flask server every sencond (required are 300ms) to get the newest image. The timer is set in the onMounted of App.vue.
When I restart everything, the frontend displays the images for a few seconds, then just stops. There is no load event from the image control anymore.

Is this a problem with VueJS? Or with the browser? The browser I am using is Google Chrome. Is there a better way to load large image sequences with high display frequency?

This is the python code:

@app.route('/img.jpg')
def image():

    while not socket.poll(10000, zmq.POLLIN):
        continue

    thumbnail = socket.recv(zmq.NOBLOCK)
    
    arr = np.frombuffer(thumbnail, dtype=np.uint8)
    img = np.reshape(arr, ( 2048, 1536,4))
    
    from PIL import Image as im
    data = im.fromarray(img)
    th = io.BytesIO()
    data.save(th, "JPEG")

    th.seek(0)

    return flask.Response(th, mimetype='image/jpeg')

and in my frontend code

the image store

const imageRoute = "img.jpg";
export const useImageStore = defineStore(
'image',
() => {
    const imgUrl = ref("");
    const imageBaseUrl = axios.defaults.baseURL + imageRoute;

    function updateImageData() {
        axios.get(imageRoute)
            .then(() => {                    
                imgUrl.value = imageBaseUrl + "?" + new Date().getTime();
            })
            .catch((err) => {
                console.error(err);
                imgUrl.value = "";
            });
    }

    return {
        updateImageData,
        imgUrl
    }
})

and the vue file:

<script setup>
import {useImageStore} from "../stores/image";

const imageStore = useImageStore();

function triggerRefresh() {
  console.log("refresh triggered by load event!")
}  

</script>

<template>
<main>
  <div class="container">
  <div class="row">
    <div class="col-md-5 px-1">
      <img alt="Grapes" class="rounded w-100  img-thumbnail" :src="imageStore.imgUrl" @load="triggerRefresh"/>
    </div>
  <div>
  <div>
 </main>
 </template>