title: How to hide an element from a list if clicked twice without toggling in a vue nuxt application
body: <p>I have got a clickable list in a Vue/Nuxt application. When one item is selected, a little tick mark appears. I would like to be able to unselect an item (the tick mark to disappear) if the item is clicked again. If I click on another item, I would like this item to be selected and the previously selected item to unselect (only one item can be selected). So far, if I try to select another item, I need to click twice because the first click will only unselect the first selected item and the second click will select the new item. Any idea ??</p>
  <pre><code>&lt;template&gt;
    &lt;div
      v-for=&quot;(item, itemIndex) in list&quot;
              :key=&quot;itemIndex&quot;
              @click=&quot;onClick(itemIndex)&quot;
    &gt;
      &lt;div&gt;
        &lt;div v-if=&quot;activeIndex == itemIndex &amp;&amp; selected === true&quot;&gt;
          &lt;TickMark /&gt;
        &lt;/div&gt;
        &lt;Item /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
      props: {
          questionModules: {
              required: true,
              type: Array,
          },
      },
      data() {
          return {
              activeIndex: null,
              selected: false,
          }
      },
      methods: {
          onClick (index) {
              this.activeIndex = index
              this.selected = !this.selected
          },
      },
  }
  &lt;/script&gt;
  
  </code></pre>