Microsoft speech recognition stopContinousRecognition does not work

Question

 am trying to create a wrapper for the Microsoft Speech SDK to use in my vue componenet. The issue I am having is after calling startRecognition which calles startContinousRecognitionAsync, no other click even is being detected and it will not stop when I click stop and call the stopRecognition function. Here is the wrapper I created:

export default class SpeechRec {
    constructor(key, region) {
        this.key = key;
        this.region = region;
        this.speechRecognizer = undefined;
        this.stop = false;
    }

    createSpeechConfig() {
        return SpeechSDK.SpeechConfig.fromSubscription(this.key, this.region);
    }

    createRecognizer(speechConfig) {
        return new SpeechSDK.SpeechRecognizer(speechConfig);
    }

    createRecognizerWithLanguage(speechConfig, language) {
        return new SpeechSDK.SpeechRecognizer(speechConfig, language);
    }

    async startRecognition(nextAction) {
        console.log("STOP: ", this.stop)
        const speechConfig = this.createSpeechConfig();
        this.speechRecognizer = this.createRecognizer(speechConfig);
        this.speechRecognizer.BabbleTimeout = 0.75;
        const stopButton = document.querySelector(".stopButton")
        console.log(this.speechRecognizer)

        this.speechRecognizer.startContinuousRecognitionAsync();
        return new Promise(function(resolve, reject) {
            this.speechRecognizer.recognized = function (s, e) {
                if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
                    nextAction(e.result.text)
                    resolve(e.result.text);
                }
            };

            this.speechRecognizer.canceled = function (s, e) {
                if (e.reason === SpeechSDK.CancellationReason.Error) {
                    reject(e.reasonDetails);
                }
            };
        }.bind(this));
    }

    stopRecognition() {
        this.speechRecognizer.stopContinuousRecognition();
        this.speechRecognizer.close();
        
    }
}
Here is the vue component:

<template>
  <div>
    <button @click="startSpeechRec">Start</button>
    <button class="stopButton" @click="stopSpeechRec">Stop</button>
  </div>
</template>
<script>
import SpeechRec from '../Util/Speech';
export default {
  name: 'ReadingPage',
  data() {
    return {          
      speechRec: null,
      stopRecognitionRequested: false,
    };
  },
  props: [],
  created() {
    this.fetchReading();

  },
  mounted() {
    const stopButton = document.querySelector(".stopButton")
    stopButton.addEventListener("click", () =>{
            console.log(this.speechRec)
    })
  },
  methods: {
    stopSpeechRec(){
      this.speechRec.stopRecognition()
    },
    startSpeechRec(){
      this.stopRecognitionRequested = false;
      this.speechRec = new SpeechRec('Key', 'eastus');
      const textResult = this.speechRec.startRecognition();
    },

  },
};
</script>
<style>
.highlighted {
  background-color: yellow;
}
</style>
is it because I am using a promise? is there a better way of writing this? Neither the event listener I am adding on mount or the method stopSpeechRec are being called when I press stop.