Style conflicts caused by using v-if and custom directives at the same time

Version

2.5.2

Reproduction link

codesandbox.io

Steps to reproduce

1. click the white button
2. v-wide will change the backgroundColor

What is expected?

The second popup's backgroundColor should be blue

What is actually happening?

The popup's backgroundColor is red that is the previous one

I use v-if and a custom directives to update the inline style at the same time. when the next element is displayed, it will inherit the style of the previous one.And the displayed element doesn't trigger the inserted lifecycle.

some code:

v-wide

const wide = Vue.directive("wide", {
  inserted: function (e, binding, vnode) {
    const style = window.getComputedStyle(e);
    console.log(style.backgroundColor);
    if (style.backgroundColor == "rgb(0, 0, 0)") {
      e.style.backgroundColor = "red";
    }
  }
});

app.vue

<div class="popup popup1" v-if="showPopup1" v-wide>
  <div class="btn-container">
    <div class="btn" @click="showPopup1 = false;showPopup2 = true;"></div>
  </div>
</div>
<div class="popup popup2" v-if="showPopup2" v-wide>
  <div class="btn-container">
    <div class="btn" @click="showPopup2 = false"></div>
  </div>
</div>