`Maximum recursive updates exceeded` when using props as source in `useMediaControls`

[Oskar Sommer]

Describe the bug

I am building a video player and think useMediaControls is a great fit.
However, during development I get the Maximum recursive updates exceeded during every (soft) reload.

I narrowed the issue down to using a props property in the src attribute of useMediaControls.
Not sure if src isn't meant to be used this way or if it's a bug though.

https://github.com/vaaski/use-media-controls-repro/blob/main/src/components/VideoPlayer.vue#L1-L14

To reproduce:

• clone the repo
• run dev server
• change something in components/VideoPlayer.vue (e.g. add an empty line in the <script setup>)
• there'll be this error in the console:

Reproduction

https://github.com/vaaski/use-media-controls-repro

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 22.21 GB / 31.85 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE     
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD        
    pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD        
  Browsers:
    Brave: Version 1.63.174 Chromium: 122.0.6261.128 (Official Build) (64-bit)

Used Package Manager

pnpm

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.