BUG | `useSpeechRecognition` | `start` function triggers a `recognition has already started` error

[clemvnt]

Describe the bug

1. Go to the https://vueuse.org/core/useSpeechRecognition page.
2. On the demo, click on the Press and talk button.
3. The following error occurs:

InvalidStateError: Failed to execute 'start' on 'SpeechRecognition': recognition has already started.

If I'm not mistaken, the bug was introduced in version 12.3.0 by #4119.

1. The start function calls the recognition.start function :

   vueuse/packages/core/useSpeechRecognition/index.ts

   Line 66 in 636b866

   recognition?.start()

2. In the onstart event callback, the isListening is set to true :

   vueuse/packages/core/useSpeechRecognition/index.ts

   Line 95 in 636b866

   isListening.value = true

3. There is a watcher on the isListening ref which re-calls the recognition.start function :

   vueuse/packages/core/useSpeechRecognition/index.ts

   Line 124 in 636b866

   recognition!.start()

Reproduction

Demo on the https://vueuse.org/core/useSpeechRecognition/ page.

System Info

OS: Windows 11 10.0.22631
  CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
  Memory: 9.31 GB / 31.69 GB
Binaries:
  Node: 22.13.0 - C:\Program Files\nodejs\node.EXE
  npm: 11.0.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome: 132.0.6834.160
  Edge: Chromium (130.0.2849.56)
  Internet Explorer: 11.0.22621.3527
npmPackages:
  @vueuse/core: 12.5.0
  vue: 3.5.13

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.