Check if v-dialog is open and stop audio playing - vue.js

Question

I would like have a watcher on the v-dialog to stop audio files playing when the dialog is open. Usually I would have v-model="dialogVisible" and then add a watch. But as I have multiple dialogs I have had to use a v-model="media.show" for the dialog.
this.audioPlayer.pause()
this.isPlaying = false
How can I now check for when the dialog is open and then set the above to prevent audio files playing while a dialog is open?
<v-list-item-action>
<div v-if="media.url.includes('mp3')">
<v-btn
v-if="isPlaying && (currentMedia.id === media.id)"
icon
#click="pause"
>
<v-icon>pause</v-icon>
</v-btn>
<v-btn
v-else
icon
#click="play(media)"
>
<v-icon>play_arrow</v-icon>
</v-btn>
</div>
<div v-else>
<v-dialog
v-model="media.show"
persistent
width="800px"
:retain-focus="false"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</template>
<v-card>
<Video
v-if="media.show"
:video-url="media.url"
/>
</v-card>
<v-card-actions>
<v-spacer />
<v-btn
color="primary"
text
#click="media.show = false"
>
Close
</v-btn>
</v-card-actions>
</v-dialog>
</div>
</v-list-item-action>

Answer 1

What you can do is watch for a specific prop change. In your case media.show. When it changes this triggers your dialog to show. So when you are watching that prop to change you can trigger a function that you can do anything with. In this case we will pause the music when the value becomes true and resume it becomes false.
watch: {
media: {
deep: true,
handler(newVal) {
//Modal is displayed
if (newval.show) {
this.audioPlayer.pause()
this.isPlaying = false
} else {
//Resume when modal is closed (optional(
this.audioPlayer.play();
this.isPlaying = false;
}
}
}
}