使用 mu-drawer 编写侧边栏SideBar

刚开始学习 vue和 muse-ui 的小白...

效果图

点击上图右侧的遮罩层隐藏侧边栏。
直接复制官网的示例代码到 app.vue 中是完全没问题的，但是当我把侧边栏封装为一个组件Sidebar，点击遮罩层就不管用了！
一开始我的组件代码是这样的：

<template>
  <!-- <div class="sidebar"> -->
    <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
      <mu-appbar title="Title"></mu-appbar>
      <mu-list>
        <mu-list-item button>
            <mu-list-item-title>Menu Item 1</mu-list-item-title>
        </mu-list-item>
        <mu-list-item button>
            <mu-list-item-title>Menu Item 2</mu-list-item-title>
        </mu-list-item>
        <mu-list-item  @click="changeOpen" button>
            <mu-list-item-title>Close</mu-list-item-title>
        </mu-list-item>
        </mu-list>
    </mu-drawer>
  <!-- </div> -->
</template>

<script>
export default {
  name: 'sidebar',
  props: ['show'],
  data(){
    return {
      docked: false,
      position: 'left'
    }
  },
  computed: {
      open: {
          get() {
            return this.show;
          }
      }  
  },
  components: {
  },
  methods: {
      changeOpen(){
          this.$emit('changeState','参数')
      }
  }
}
</script>

然后就报错了。。。说 computed 里面的 open 要写set

error

我只好加个set，但是我不知道要往哪里设值，所以set 里面啥也没写。

          get() {
            return this.show;
          },
          set(value) {
          }
      } 

但是点击遮罩层还是没有作用，中间经过了无数过程，我发现每次点击遮罩层的时候会调用刚刚上面写的 set 方法，并且传递了 false 进来，于是我就在set 里调用了 changeOpen 方法（请看第二张图的methods)，这个方法是向父级请求变更侧边栏状态，终于成功了。。。
最终代码：

<template>
  <!-- <div class="sidebar"> -->
    <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
      <mu-appbar title="Title"></mu-appbar>
      <mu-list>
        <mu-list-item button>
            <mu-list-item-title>Menu Item 1</mu-list-item-title>
        </mu-list-item>
        <mu-list-item button>
            <mu-list-item-title>Menu Item 2</mu-list-item-title>
        </mu-list-item>
        <mu-list-item  @click="changeOpen" button>
            <mu-list-item-title>Close</mu-list-item-title>
        </mu-list-item>
        </mu-list>
    </mu-drawer>
  <!-- </div> -->
</template>

<script>
export default {
  name: 'sidebar',
  props: ['show'],
  data(){
    return {
      docked: false,
      position: 'left'
    }
  },
  computed: {
      open: {
          get() {
            return this.show;
          },
          set(value) {
            this.changeOpen();
          }
      }  
  },
  components: {
  },
  methods: {
      changeOpen(){
          this.$emit('changeState','参数')
      }
  }
}
</script>