There are two nested template. Changing the v-if condition in the inner template does not re-render. How to be?

Question

Vue.js

Right in the root index.html there are two nested templates, which are controlled by variables A and B, respectively. Let them be both true at first. Changing B does not update the display of the internal template.

<template>
  <div v-if = "A">
     ...
     <template>
        <div v-if = "B">
             <a @click = "onClick">...</a>
        </div>
      </template>
      ...
   </div>
</template>

onClick: function() {
  this.B = false;
}

I overcame this by "juggling" the value of A back and forth to cause the processing of the entire external template:

onClick: function() {
  this.B = false;
  this.A = !this.A;
  this.A = !this.A;
}

But, you see, it is somehow clumsy. How do Vue masters do it?

Answer 1

Just write:<a @click = "onClick" v-if="B">...</a>

Answer 2

tag templatedoes not wrap content indiv