vue 動態(tài)組件tab切換后，如何實現(xiàn)導(dǎo)航的高亮問題？

如圖，用vue的動態(tài)組件實現(xiàn)的tab切換，現(xiàn)在想讓導(dǎo)航顯示高亮! 點擊登錄時高亮展示，注冊高亮失效，反之……

代碼：

    <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;     
          },
        }
      }          

本來想用 循環(huán)方式寫,但是發(fā)現(xiàn)實現(xiàn)高亮之后，動態(tài)組件展示不出來了。有什么好方法嗎，求解？

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