using MediaRecorder to record Audio using Vue

I want to do something like this but in Vue: https://jsfiddle.net/remarkablemark/8763r506/

this is where I am up to:

   timerCount: {
      handler(value) {
        if (value > 0 && this.timerEnabled) {
          setTimeout(() => {
            this.timerCount--;
          }, 1000);
        }
        if (value == 0) {
          console.log("stopped");
          this.mediaRecorder.stop();
          this.mediaRecorder.addEventListener("stop", () => {
            const audioBlob = new Blob(self.audioChunks);
            self.recordedVoice = URL.createObjectURL(audioBlob);
          });
        }
      },
      immediate: true, // This ensures the watcher is triggered upon creation
    },
  },
  methods: {
    play() {
      this.timerEnabled = true;
      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        this.mediaRecorder = new MediaRecorder(stream);
        this.mediaRecorder.start(1000);
        var recordingsElement = document.getElementById("recordings");
        // Build the player
        var clipContainerElement = document.createElement("article");
        var clipLabelElement = document.createElement("p");
        var audioElement = document.createElement("audio");
        audioElement.setAttribute("controls", "");
        clipContainerElement.appendChild(audioElement);
        clipContainerElement.appendChild(clipLabelElement);
        recordingsElement.appendChild(clipContainerElement);
        audioElement.controls = true;

        this.mediaRecorder.ondataavailable = function (event) {
          console.log("Event: ", event.data);
          var blob = new Blob(this.chunks, { type: "audio/ogg; codecs=opus" });
          this.chunks = [];

          audioElement.src = window.URL.createObjectURL(blob);

          this.chunks.push(event.data);
        };
      });
    },

What I'm doing differently, is I have a 10 second timer running so I only want to record for 10 seconds

I am also getting this after the first second: GET blob:http://localhost:5173/a246b0de-5c75-41e9-81e4-6015ce21bb32 net::ERR_REQUEST_RANGE_NOT_SATISFIABLE

here is my repo: https://github.com/jbiddulph/music

please help