vue.jsでシンプルなアコーディオンメニュー

vue.jsでできるだけシンプルなアコーディオンメニューを作りたいと思いました。

<template>
  <div>
    <div>
      <h3 @click="open('リスト1')">
        リスト1
      </h3>
      <transition name="fade">
        <ul v-if="block.open === 'リスト1'">
          <li v-for="list in lists" :key="list.index">
            {{ list }}
          </li>
        </ul>
      </transition>
      <h3 @click="open('リスト2')">
        リスト2
      </h3>
      <transition name="fade">
        <ul v-if="block.open === 'リスト2'">
          <li v-for="list in lists2" :key="list.index">
            {{ list }}
          </li>
        </ul>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccrodionIndex',
  data () {
    return {
      block: {},
      lists: ['aaa', 'bbb', 'ccc'],
      lists2: ['111', '222', '333']
    }
  },
  methods: {
    open (value) {
      if (this.block.open === value) {
        this.$set(this.block, 'open', '')
      } else {
        this.$set(this.block, 'open', value)
      }
    }
  }
}
</script>