Javascript garbage collector doesnt collect deleted Mat instances

edit

I am reading a video and storing the Mat instance clones of each frame to an array so I could play it back on demand and also analyze the frames. Once i process the video and store the frames in the array - the memory snapshot increases from 150Mb to 1000Mb within the JSArrayBufferData.

I have to mention that i'm using Vue.js frontend framework to store the array within vue's data observable that's an array.

I've tried deleting and setting each frame to zero just to see if that would release the memory, but nothing seems to work.

I've got a simple example of this here: https://jsfiddle.net/9s51poyd/

new Vue({
 el: "#app",
 data: {
 frames: [],
 frame: null,
 },
methods: {
  createTestFrames() {
  let frame = new cv.Mat.ones(720, 1280, cv.CV_8UC4)
  for (let i = 0; i < 80; i++) {
    frames.push(frame)
  }
},
  deleteFrames() {
     for (let frame of this.frames) {
     frame.delete()
   }
   this.frames = []
 }
}
})

I would like to release the memory from chrome, because every time I analize video now or just copy these Mat instances into an array, it could go up to 9GB in memory footprint. As you can imagine that's not the desired outcome.