as shown in the figure, the tab switch using the dynamic components of vue now wants to highlight the navigation! Click to log in and highlight the display, the registration highlight is invalid, and vice versa.

Code:

    <div class="title">
        <span @click="toggleTab("log")"></span>
        <span></span>
        <span @click="toggleTab("reg")"></span>
    </div>
    <div>
        <keep-alive>
            <component :is="flag"></component>    
        </keep-alive>
    </div>

      export default {
          data(){
              return{
                  flag:"reg",
              }
          },
          components:{
              reg,
              log
          },
        methods: {
          toggleTab: function(index) {
           this.flag = index;     
          },
        }
      }          

was intended to be written in a loop, but it was found that after the implementation was highlighted, the dynamic components could not be displayed. Is there any good way to solve it?

<span v-for="(item,index) in menu" v-bind:class="{"on":flag==index}" v-on:click="toggleTab(index)">{{item.name}}</span>