Speech recognition with Web Speech API on Chrome Android browser - google-chrome

Question

I am developing a Vue web app and using Web Speech API for voice recognition.
The recognition on the desktop Chrome browser is alright but the voice recognition on the Android Chrome browser is not up to the mark.
I am not sure if this is an issue of browser setting or the speech recognition API is not enough mature in the Android Chrome Browser.
Using the speech to text APIs like Google Cloud, AVS is an option but it has a cost impact. So wanted to check if good voice recognition is possible without using them. Any pointers to how can I increase the accuracy of voice recognition on Android chrome?
Screenshot from Chrome on my laptop:
Screenshot from Chrome on Android phone:
My code for using Web Speech API:
this.recognition = new webkitSpeechRecognition() || new SpeechRecognition();
this.recognition.interimResults = true;
this.recognition.lang = this.lang();
this.recognition.start()
this.recognition.onresult = (event) => {
for (let i = event.resultIndex; i < event.results.length; ++i) {
self.query = event.results[i][0].transcript
}
}
this.recognition.onend = () => {
this.recognition.stop()
this.micro = false
this.submit(this.query)
}