经测试在html页面没有问题能点击播放 在VUE页面报错是啥子问题

<template>
<div>
<audio id="abc"><source src="/uploads/allimg/210506/0Z14T557-0.jpg"></audio>    
<div  style="cursor: pointer;" id="hh">点击播放</div>
</div>
</template>

<script>
    document.getElementById('hh').onclick = function(){
            abc.play();
        }
</script>

<style>

</style>

<template>
  <div>
    <audio ref="audio"><source src="/uploads/allimg/210506/0Z14T557-0.jpg"></audio>    
    <div style="cursor: pointer;" @click="onplay">点击播放</div>
  </div>
</template>
<script>
export default {
  name: 'Test',
  methods: {
    onplay () {
      this.$refs.audio.play()
    }
  }
}
</script>

document.getElementById('abc').play()

<script>
export default {
    mounted () {
    document.getElementById('hh').onclick = function () {
      abc.play();
    }
  }
}
</script>

 <div style="cursor: pointer;" id="hh" @click='click_play'>点击播放</div>
  methods: {
            click_play() { abc.play(); } 
          },

<template>
<div>
<audio id="abc"><source src="/uploads/allimg/210506/0Z14T557-0.jpg"></audio>    
<div   id="hh">点击播放</div>
</div>
</template>

<script>
    const abc = document.getElementById('abc');
    document.getElementById('hh').onclick = function(){
        abc.play();
    }
</script>

<style>

</style>