Vue js中的视频不能以全宽和全高显示

<video style="width: 100%; height: auto;" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<template>
  <video :style="{ width: videoWidth, height: videoHeight }" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</template>

<script>
export default {
  data() {
    return {
      videoWidth: '100%',
      videoHeight: 'auto'
    }
  },
  computed: {
    // 计算视频元素的宽度和高度
    videoSize() {
      const video = document.querySelector('video')
      if (video) {
        const aspectRatio = video.videoWidth / video.videoHeight
        if (aspectRatio > 1) {
          // 宽屏视频
          this.videoWidth = '100%'
          this.videoHeight = 'auto'
        } else {
          // 竖屏视频
          this.videoWidth = 'auto'
          this.videoHeight = '100%'
        }
      }
    }
  },
  mounted() {
    this.videoSize()
  }
}
</script>