Chromeのエラー DOMException: The play() request was interrupted by a call to pause().

Question

Videoタグで動画を設置したページでGoogle Chromeの
DOMException: The play() request was interrupted by a call to pause().
エラーを解消したいです。

以下のGoogleのドキュメントを参考にしてみました

DOMException: The play() request was interrupted

https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

【起こっているエラー現象】
Videoタグで動画を再生するページで、初回アクセス時は問題なく自動で動画が再生されます。
しかし、リロードした際や、ブラウザバックでそのページに戻ってきた際には、
動画が最初のコマで停止した状態になっており、
ChromeのdevToolsで以下のエラーメッセージが表示されます。
DOMException: The play() request was interrupted by a call to pause().

実際のコードは以下のとおりです。

<template>
  <div>
    <div class="video-wrap">
      <video id="video" playsinline muted autoplay>
        <source :src=source type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      source: "mov/video.mp4"
    }
  },
  mounted() {
    const myVideo = document.getElementById('video')
    const playPromise = myVideo.play()
    
    if (playPromise !== undefined) {
      playPromise.then()
      .catch(error => {
        console.log(error)
      })
    }
    
    myVideo.addEventListener('ended', () => {
      this.$emit('ended-video')
    }, false)
  }
}
</script>

Promiseの記述を間違えているのか、Vueのイベントのフックさせるタイミングや記述が間違えているのか分からないのですが、Chrome以外ではautoplayがきちんと動作しています。

ちなみに、動画の再生が終了したら、this.$emit('ended-video')で親コンポーネントに知らせていますが、こちらは正常に機能しています。

よろしくお願いいたします。