Vue event on element destruction - vue.js

Question

Is there a vue event when a v-if condition ceases to be true?
For example if I want to set y when div id foo is removed for whatever reason.
What should go in place of #whenDivGoes?
<div v-if="z">
<div id="foo"
v-if="x"
#whenDivGoes="y = true"
>
Hello
</div>
<div>
<div v-if="!x">Not X</div>
<div v-if="y">Bye</div>

Answer 1

If I understand correctly you want to set value of 'y' to be true when the foo div cease to exist.
Your foo div is shown when your 'x' is true, and hidden when x is false, so you can declare 'y' as a computed property that depends on x.
computed:{
y(){
return !x;
}
}
then
<div v-if="z">
<div id="foo"
v-if="x">
Hello
</div>
<div>
<div v-if="!x">Not X</div>
<div v-if="y">Bye</div>
note: declaring 'y' as computed property would prevent you from modifying/assigning value to it directly. if you want to 'do something' when 'y' value is changed you can use watch on 'y'.

Answer 2

With v-if, is the node is taken directly from the virtual DOM, you would need to watch and create your own callback.
If you are looking for a quick solution similar to your example, i have written a quick directive to you put directly into the element you want a callback on, but it would require you to use v-show as apposed to v-if (as it only changes the css display class)
Simply change the div you want a callback on when its not longer displayed, and add v-show-event:
<div id="foo"
v-show="x"
v-show-event="() => y = true"
>
So basically what's happening, is the directive checks if the element has style.display set to none
Vue.directive('show-event', {
update: function(el, binding, vnode) {
if(el.style.display === "none") {
if(typeof binding.value==='function') {
binding.value.bind(vnode.context)(event)
}
}
}
});
new Vue({
el: "#app",
data: {
done: false,
newEv: "this is some text"
},
methods: {
toggle: function(){
this.done = !this.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2
v-show="!done"
v-show-event="() => newEv = 'show event was hidden'">
v-show-event directive
</h2>
<button #click="toggle()">
Toggle
</button>
<div v-text="newEv"></div>
</div>