请教大佬，帮我看下这段代码在vue里，哪里出错了

Question

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

<template>
<div>
<audio id="abc"><source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3"></audio>    
<div  style="cursor: pointer;" id="hh">点击播放</div>
</div>
</template>

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

<style>

</style>

Answer 1

<template>
  <div>
    <audio ref="audio"><source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3"></audio>    
    <div style="cursor: pointer;" @click="onplay">点击播放</div>
  </div>
</template>
<script>
export default {
  name: 'Test',
  methods: {
    onplay () {
      this.$refs.audio.play()
    }
  }
}
</script>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

<template>
<div>
<audio id="abc"><source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3"></audio>    
<div   id="hh">点击播放</div>
</div>
</template>

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

<style>

</style>