单击v-toolbar-side-icon显示v-list不起作用，第二次单击

Question

我已经为工具栏创建了一个组件，并将其导入到另一个组件中。仅在移动设备视图中，它仅在第一次单击时才有效，显示列表，但在第二次单击后不再起作用

这是我的工具栏组件

<template>

<v-app>

<v-toolbar color= #337238 fixed style="z-index:150; margin-top:20px;">
  <v-toolbar-title class="white--text"

  >The Past Pupils Association</v-toolbar-title>
  <v-spacer></v-spacer>

  <v-toolbar-items class="hidden-sm-and-down"
  >

     <v-btn
      class="white--text"
      v-for="item in menu"
      :key="item.icon"
      flat
      @click="nav(item.title)"
    >{{ item.title }}</v-btn>

  <v-btn color="success" href="http://127.0.0.1:8000/register">Register</v-btn>

  </v-toolbar-items>

      <v-menu class="hidden-md-and-up">

      <v-toolbar-side-icon slot="activator"  ><v-icon>more_vert</v-icon></v-toolbar-side-icon>

                <v-list>

                  <v-list-tile v-for="item in menu" :key="item.title">
                    <v-list-tile-content >
                      <v-list-tile-title  @click.prevent="nav(item.title)" >{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                  <v-list-tile>

                <v-btn color="success" 
   href="http://127.0.0.1:8000/register">Register</v-btn>
                  </v-list-tile>  
                </v-list>
  </v-menu>
  </v-toolbar>
  </v-app>

   </template>

   <script>
    export default {

      data () {
      return {
      menu: [
         { icon: 'home', title: 'OB History' },
         { icon: 'info', title: 'School History' },
         { icon: 'warning', title: 'Gallery'}
         ],

      tooB: ''
        }
       },

     methods:{

       nav(c){

        if( c == 'OB History'){

          this.tooB = 'ObHistory'
           this.$emit('Toolbar', this.tooB );

        }

        if( c == 'School History'){

          this.tooB = 'HomeIndex'
           this.$emit('Toolbar', this.tooB );

        }

        this.$forceUpdate();
        },


       },

         }
         </script>

            <style lang="scss" scoped>
             .application--wrap {

               min-height: 0vh !important;
             }
              </style>

单击发送组件名称的按钮，此组件将加载该组件

HomeMain组件：

<template>
<div>
    <div>
        <v-slide-x-reverse-transition>

            <component v-bind:is="this.changeCom" ></component>
        </v-slide-x-reverse-transition>

    </div>

    <div>

        <tool-bar @Toolbar= "change" ></tool-bar>

    </div>

   </div>

   </template>


    <script>

     import  ToolBar from './ToolBar';
     import  HomeIndex from './HomeIndex';
     import  ObHistory from './ObHistory';


     export default {

              data() {
                   return{

                      changeCom : 'HomeIndex'

                       }
                    },

           methods:{

              change(com){

                      this.changeCom = com
                      console.log('lol2', this.changeCom)

                     },

                   },


               components: {

                  'HomeIndex':HomeIndex,
                  'ToolBar':ToolBar,
                  'ObHistory' : ObHistory
                 },

          }
          </script>

          <style lang="scss" scoped>
         .application--wrap {

            min-height: 0vh !important;
             }
          </style>

它仅适用于首次点击，该如何解决？