vue动态设置audio的src无效

下面src是一样的，但是如果动态设置就无效。

<template>
    <div class="player">
        <div id="trigger" >
<!--            <audio :src="src"  id="audio" loop ></audio>-->
            <audio src="../../assess/static/music/01.mp3"  id="audio" loop ></audio>

        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                src: "../../assess/static/music/01.mp3"
            }
        }
</script>

 并且动态设置的时候，调试时出现错误不支持 HTTP "Content-Type" 设为 "text/html"。媒体资源 http://192.168.0.7:8080/assess/static/music/01.mp3 载入失败和无法播放媒体。没有相应格式的解码器：text/html。

 

并且在网络那里看到01.mp3被看做了HTML的类型。

尝试了用ref动态引入无效：

this.$refs.audio.src =  "../../assess/static/music/01.mp3";

 想保持动态引入只能够使用require引入。也就是：

<template>
    <div class="player">
        <div id="trigger" >
         <audio :src="mysrc" ref='audio'  id="audio" loop ></audio>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                mysrc:require("../../assess/static/music/01.mp3")
            }
        }
</script>