为什么同一vue组件上的多个引导下拉菜单共享相同的选项？

<template>
  <div>
    <div v-for="option in options" :key="option.id">
      <button @click="toggleDropdown">{{ option.name }}</button>
      <ul v-if="isDropdownOpen">
        <li v-for="item in option.items" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          name: 'Menu 1',
          items: [
            { id: 1, name: 'Item 1' },
            { id: 2, name: 'Item 2' },
            { id: 3, name: 'Item 3' }
          ]
        },
        {
          id: 2,
          name: 'Menu 2',
          items: [
            { id: 4, name: 'Item 4' },
            { id: 5, name: 'Item 5' },
            { id: 6, name: 'Item 6' }
          ]
        }
      ],
      isDropdownOpen: false
    };
  },
  methods: {
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen;
    }
  }
};
</script>