vue中的.once修饰符无效

vue中的事件修饰符无效给button加了.once仍然可以继续触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- Vue中的事件修饰符 -->

    <div id="root">
        <button @click.once="hi">你好</button>

        <!-- 这样也可以阻止默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我进入百度</a>
    </div>
</body>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                name:'黑马程序员',
            },
            methods:{
                hi(){
                    console.log('button被触发')
                },
                showInfo(event){
                    // event.preventDefault()  阻止事件的默认行为
                    alert('即将进入百度')
                    
                }
            }
        })
    </script>   
</html>

我测试没有发现问题，怀疑是vue的版本问题，你用的是哪个版本。改用这个链接看一下：
https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js @2.6.14/dist/vue.js

你看下这篇博客吧, 应该有用👉 ：vue2 button标签事件异常
除此之外, 这篇博客: 【vue】封装自己的button中的 设计图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
需求多种场景下的按钮，且每种场景下有三种不同状态，按钮预留size和disable选项。