How to hide div with Vue.js

As @Ferrybig stated, Vue only has control over the element it's bound to and all of those child elements. Your hide element is outside the element bound to Vue (app) so Vue cannot change it.

With a slight change, your code works fine:

new Vue({
el:'#wrapper',
data:{
    seen: true
}
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="wrapper">
  <div id="app" v-on:click="seen = !seen" class="control">
      <p>click app</p>
  </div>
        
  <div v-if="seen" id="hide">
      <p>hide me </p>
  </div>
</div>

I recommend either use "v-show" or ":class" for hiding component efficiently. In my own experience that in some wierd situations, the v-show may causes ag-grid compoenent into bad data table however no problem when use the ":class".

The template code could be:

<div v-show="seen" id="hide">
   <p>hide me </p>
</div>

Or

<div :class="{ hide: !seen }" id="hide">
   <p>hide me </p>
</div>

with CSS

.hide {
    visibility: hidden !important;
}