vue数据驱动作用域问题

需求是这样的，如图

点击禁用后，变成启用，但是结果却不让人满意

我们先来看一下错误代码：

//conponet控件里的内容

html内容：

<div>
    <button @click.stop="isUse=!isUse" v-show="isUse">
        启用
    </button>
    <button @click.stop="isUse=!isUse" v-show="!isUse">
        禁用
    </button>
</div>

javascript内容：

<script>
    export default {
        created(){

        },
        data() {
            return {
                date: "",
                isUse: true
            }
        }
</script>

解析错误：vue比较好的就是数据驱动，最后发现我们两个button里公用了一个data对象，return的是同一个对象；
你的误解：我看过官网这段代码  基础--组件--data必须是函数

//注册全局组件my-componet

Vue.component('simple-counter', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
    // 但是我们返回给每个组件的实例的却引用了同一个data对象
    data: function () {
        return data
    }
})
new Vue({
    el: '#example-2'
})

//html页面内容 调用组件

<div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

结果为

而并非为

这个时候我就觉得return返回的对象是一个全新的对象，所以才会产生上面的错误

我们来探讨一下，return返回的对象是否是一个全新的data
答案为：
调用一次组件my-component只会生成一个data 调用两次会生成两个data

欢迎初学者vue的小伙伴一起讨论，不限于这个问题！