解决Invalid handler for event "click":问题

解决Invalid handler for event "click":问题 

上一篇文章介绍了如何搭建一个基于vue和ElementUi 的项目，当我在项目中添加 一个button按钮，并未这个按钮添加一个@click事件

    <el-button type="primary" icon="el-icon-edit" circle @click="addNew" ></el-button>

这时我的<script>是这样的

<script>
export default {
  name: 'App',
    methods:{
        addNew:function(){
            console.log("你点击了新增按钮！")
        }
    }
}
</script>

运行到浏览器发现样式正确,但是当我点击按钮的时候虽然触发了console打印了你点击了新增按钮，但是控制台抛出一个错误：vue.common.js?e881:2643[Vue warn]: Invalid handler for event "click": got undefined ......

有问题找百度，有人说method需要和data同级，但是我的代码里面并没有出现data结构，那会不会是这个原因呢？OK，那好在代码中加入data，于是我的<script>变成了这样：

<script>
export default {
  name: 'App',

//添加data
    data(){
        return {
            
        }
    },
    methods:{
        addNew:function(){
            console.log("你点击了新增按钮！")
        }
    }
}
</script>

再次运行发现问题解决了，那会不会真是这个原因导致出错呢？为了重现错误我又将代码改了回去，重新编译发现同样没有问题。这个错误就这样不知道为什么就解决了！！

额到此问题虽然解决了，但是导致问题出现的原因却没能明白，还求大佬告知！