Div (contains list of items) not close when clicked outside - vue.js

Question

Please open https://jsfiddle.net/gfmyt9u8/31/
When user clicks outside <section> tag area, then the opened div overlay panel should be closed.
Steps to produce scenario :
Click "Please Select Options"
Now, click first item from opened overlay panel (by doing this, the panel got closed automatically)
Next, Click inside the blue color border div (This shows "Please Select Options" as label) again
Now, try to click outside the "blue color border div" and "opened div overlay panel beneath" both
overlay panel will not close
Actual Result : overlay panel is not closing
Expected Result : overlay panel should close when clicked outside the "blue color border div" and "open overlay panel
beneath"

Answer 1

Use the mounted lifecycle hook to add a click event listener to check if the click event is outside the element or not, and based on that hide the element.
A working example:
new Vue({
el: '#app',
data: {
displayList: false,
cat: ['A', 'B']
},
methods: {
itemSelect(o) {
this.displayList = false;
}
},
mounted: function () {
// Listen to all clicks on the document
document.addEventListener("click", function(event) {
// If the click inside the element, do nothing
if (event.target.closest(".section-main")) return;
// If the clicks outside the element, hide it!
this.displayList = false;
}.bind(this));
}
});
.display-no-selected {
cursor: text;
width: 300px;
height: 25px;
border: solid 2px blue;
}
.display-list {
border: solid 1px wheat;
width: 300px;
max-height: 150px;
overflow-y: auto;
}
.toggle-list {
display: none;
}
ul, .selected-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.inner-ul li {
cursor: pointer;
font-weight: normal;
}
ul.inner-ul li:hover {
background-color: wheat;
}
.default-highlight {
background-color: wheat;
}
ul.inner-ul li span {
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section class="section-main">
<div class="display-no-selected" #click="displayList=true"> Please Select Options
</div>
<div class="display-list"
v-bind:class="{'toggle-list': !displayList}">
<ul class="inner-first-ul inner-ul">
<li v-for="o in cat" #click="itemSelect(o)">
<span>{{o}}</span>
</li>
</ul>
</div>
</section>
</div>