Toggle Open Close on multiple divs using vue.js

I’m using vue.js and have a list of items that when clicked opens each individual div. How can I get my button to open each one individually instead of opening all of them when clicked?

I don’t want to pass isOpened as another key, value in my object, so Somehow I need this as being the index of the button getting clicked

vue.js

<div v-for="(item, index) in items" :key="index">
   <div class="item">
       <button @click="toggleItem">Toggle the {{item.name}}</button>
       <div class="toggle-item" v-show="toggled">
          {{ item.name }}
          {{ item.title }}
       </div>
     </div>
 </div>

data

export default {
    data:() => ({
    toggled: false,
      items: [
      {
        name: 'First List',
        title: 'First title'
      },
      {
        name: 'Second List',
        title: 'Second title'
      },
      {
        name: 'third list',
        title: 'third title'
      }
    ]
    }),
     methods: {
        toggleItem: function() {
        this.toggled = !this.toggled;
        }
    }
}

style

.item {
  height: 40px;
  width: 200px;
  background: #cccccc;
  margin-bottom: 20px;
}

.toggle-item {
  background: red;
  height: 100px;
  width: 100px;
}