Vue

HTML

<div id="app">
  <div class="block" v-for="(todo, i) in todos">
    <p @click="$store.commit('toggleOpen', i)">{{todo.text}}</p>
    <div class="dropdown" :class="{'dropdown-active': todo.open}">
      <p>{{todo.dropdownText}}</p>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/g/[email protected],[email protected]"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.block {
  display: block;
  background-color: blue;
  border: solid 
}



.dropdown {
  display: none;
  background-color: pink;
}

.dropdown-active {
  margin-top: 50px;
  display: block;
  background-color: red;
}

Vue

const store = new Vuex.Store({
  state: {
    todos: [
      { text: "Learn", dropdownText: "JavaScript" },
      { text: "Learn ", dropdownText: "Vue" },
      { text: "Play around in", dropdownText: "JSFiddle" },
      { text: "Build something ", dropdownText: "awesome" }
    ].map((n, i) => Object.assign(n, { id: i + 1, open: false }))
  },
  mutations: {
    toggleOpen(state, index) {
      const todo = state.todos[index];
      todo.open = !todo.open;
    }
  }
})

new Vue({
  store,
  el: '#app',
  computed: {
    todos() {
      return this.$store.state.todos;
    }
  }
});