title: Vue JS - How to hide an element when clicked outside of an element
body: <p>I have four pictures when the user hovers over the picture, a certain element is displayed, and when the cursor is removed outside the element, the element disappears</p>
  <p>In the mobile version, <code>mouseover</code> and <code>mouseleave</code> do not work, they are replaced naturally by clicks, but the problem is that when the user clicks outside the element, the element does not disappear, I tried different packages, but they do not work more precisely, the <code>v-click-outside</code> event does not work</p>
  <p>You can see <a href="https://codesandbox.io/s/pensive-knuth-yyg97" rel="nofollow noreferrer">my code in codesandbox</a></p>
  <p>After you open my project in codesandbox Open the page in a new tab by clicking on the &quot;Open in new window&quot; button then select the mobile version then click on the pictures after clicking again outside the element the element does not disappear</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;enjoy_headline_container&quot;&gt;
        &lt;div class=&quot;EnjoyGirlsContainer&quot;&gt;
          &lt;div&gt;
            &lt;h3 style=&quot;margin: 0&quot;&gt;
              Open the page in a new tab by clicking on the &quot;Open in new window&quot;
              button then select the mobile version then click on the pictures
              after a second click outside the element the element does not
              disappear
            &lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;EnjoyGirlsList&quot;&gt;
            &lt;div
              v-for=&quot;(chunk, index) in Math.ceil(EnjoyGirlsList.length / 2)&quot;
              :key=&quot;'chunk-' + index&quot;
              :class=&quot;'wrap-' + index&quot;
            &gt;
              &lt;div
                v-for=&quot;(item, index) in EnjoyGirlsList.slice(
                  (chunk - 1) * 2,
                  chunk * 2
                )&quot;
                :key=&quot;'img-' + index&quot;
                class=&quot;EnjoyCard&quot;
                :class=&quot;'EnjoyCard-' + index&quot;
              &gt;
                &lt;div&gt;
                  &lt;img
                    @mouseover=&quot;mouseOver(item, (hover = true))&quot;
                    :src=&quot;item.imagePath&quot;
                    alt=&quot;Snow&quot;
                  /&gt;
                &lt;/div&gt;
  
                &lt;div class=&quot;EnjoyCardContainer&quot;&gt;
                  &lt;div
                    :style=&quot;{ background: item.textColor }&quot;
                    class=&quot;EnjoyCardChildContainer&quot;
                  &gt;
                    &lt;h3 class=&quot;EnjoyCardChildContainerTitleName&quot;&gt;
                      {{ item.titleName }}
                    &lt;/h3&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div
                  v-if=&quot;selected === item&quot;
                  class=&quot;below-all-description EnjoyGirlsHoverEffect&quot;
                &gt;
                  &lt;div class=&quot;next-to-description EnjoyGirlsHoverEffect&quot;&gt;
                    &lt;div
                      style=&quot;width: 100%; display: flex; justify-content: center&quot;
                      v-for=&quot;(enjoy, index) in EnjoyGirlsList&quot;
                      :key=&quot;index&quot;
                    &gt;
                      &lt;div
                        @mouseleave=&quot;mouseout(enjoy, (hover = false))&quot;
                        class=&quot;EnjoyGirlsChildHoverEffect&quot;
                      &gt;
                        &lt;component
                          v-show=&quot;enjoy.hovered&quot;
                          v-bind:is=&quot;enjoy.componentName&quot;
                        &gt;&lt;/component&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;below-all-description&quot;&gt;
            &lt;template v-if=&quot;selected === null&quot;&gt;&lt;/template&gt;
            &lt;template v-else&gt;
              &lt;div
                style=&quot;width: 100%; display: flex; justify-content: center&quot;
                v-for=&quot;(enjoy, index) in EnjoyGirlsList&quot;
                :key=&quot;index&quot;
              &gt;
                &lt;div
                  @mouseleave=&quot;mouseout(enjoy, (hover = false))&quot;
                  class=&quot;EnjoyGirlsChildHoverEffect&quot;
                &gt;
                  &lt;component
                    v-show=&quot;enjoy.hovered&quot;
                    v-bind:is=&quot;enjoy.componentName&quot;
                  &gt;&lt;/component&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/template&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import EnjoyBlue from &quot;./components/EnjoyBlue&quot;;
  import EnjoyGreen from &quot;./components/EnjoyGreen&quot;;
  import EnjoyYellow from &quot;./components/EnjoyYellow&quot;;
  import EnjoyRed from &quot;./components/EnjoyRed&quot;;
  
  export default {
    name: &quot;HomePage&quot;,
    components: {
      EnjoyRed,
      EnjoyYellow,
      EnjoyGreen,
      EnjoyBlue,
    },
  
    data() {
      return {
        selected: null,
        hover: false,
        sectionGirlsListComponentsNames: [
          &quot;EnjoyRed&quot;,
          &quot;EnjoyYellow&quot;,
          &quot;EnjoyGreen&quot;,
          &quot;EnjoyBlue&quot;,
        ],
        EnjoyGirlsList: [
          {
            imagePath: &quot;https://i.ibb.co/mCpNXhG/IMG-6061-min.png&quot;,
            titleName: &quot;TEENS&quot;,
            textColor: &quot;#74C8C5&quot;,
            hovered: false,
            componentName: &quot;EnjoyBlue&quot;,
          },
          {
            imagePath: &quot;https://i.ibb.co/WvJjwsN/Rectangle-2.png&quot;,
            titleName: &quot;MINXES&quot;,
            textColor: &quot;#76ED00&quot;,
            hovered: false,
            componentName: &quot;EnjoyGreen&quot;,
          },
          {
            imagePath: &quot;https://i.ibb.co/7khc5f0/Rectangle-3.png&quot;,
            titleName: &quot;MILFS&quot;,
            textColor: &quot;#FFE600&quot;,
            hovered: false,
            componentName: &quot;EnjoyYellow&quot;,
          },
          {
            imagePath: &quot;https://i.ibb.co/6nz97Bw/Rectangle-4.png&quot;,
            titleName: &quot;COURGARS&quot;,
            textColor: &quot;#CC003D&quot;,
            hovered: false,
            componentName: &quot;EnjoyRed&quot;,
          },
        ],
      };
    },
    methods: {
      mouseOver: function (enjoy) {
        this.EnjoyGirlsList.forEach((enjoy) =&gt; (enjoy.hovered = false));
        this.selected = enjoy;
        enjoy.hovered = true;
        if (this.hover) {
          console.log(&quot;4949494&quot;);
        }
      },
      mouseout: function (enjoy) {
        this.selected = null;
        enjoy.hovered = false;
      },
      mouseEnter: function () {},
      Prev() {
        this.$refs.carousel.prev();
      },
      showNext() {
        this.$refs.carousel.next();
      },
    },
  };
  &lt;/script&gt;
  </code></pre>