title: Expand/collapse in Vue
body: <p>I am currently making an accordion from data coming from a service (I have made an object named &quot;groups&quot; for example). Currently, I can click on the Group Name and it will hide/show the Description correctly, however it opens all instances. How can I make it open the group that was clicked, instead of all?</p>
  <p>Here is my fiddle: <a href="https://jsfiddle.net/ch609uov/1/" rel="nofollow noreferrer">https://jsfiddle.net/ch609uov/1/</a></p>
  <p>I know I can use the open property in my groups var, however the actual data I am working with does not have that property. So, I need it to work with the isExpanded prop which I have added to my Vue instance.</p>
  <pre><code>var groups = {
  &quot;GROUP A&quot;: {
  &quot;name&quot;: &quot;GROUP A&quot;,
  &quot;open&quot;: false,
  &quot;desc&quot;: &quot;description 1&quot;,
  &quot;heading&quot;: &quot;test&quot;,
  &quot;items&quot;: [
    &quot;item 1&quot;
  ]
  },
  
  new Vue({
  el: &quot;.vue&quot;,
  data: {
  groups: groups,
  heading: &quot;Plan Communications&quot;,
  isExpanded: false
  }
  })
  </code></pre>