Версия не отображается в меню навигации. Щелкните элемент vuejs vuetify.

Question

В моем меню навигации внизу я показываю версию, но когда я нажимаю на menuItems, версия отображается за исключением тех случаев, когда я нажимаю на меню профиля (как показано на рисунках). Я не могу найти причину, по которой это происходит?

 <template>
     <v-navigation-drawer
       v-model="drawer"
       absolute
       temporary>

       <v-list nav dense >
            <v-list-item-group 

    >
      <v-list-item :to="{path:'/home'}">
        <v-list-item-icon>
          <v-icon>mdi-home</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Home</v-list-item-title>
      </v-list-item>

      <v-list-item :to="{path:'/profile'}">
        <v-list-item-icon>
          <v-icon>mdi-account</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Profile</v-list-item-title>
      </v-list-item>

      <v-list-item :to="{path:'/search'}">
        <v-list-item-icon>
          <v-icon>search</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Search</v-list-item-title>
      </v-list-item>

    </v-list-item-group>
  </v-list>

  <template v-slot:append >
    <div >
      <v-btn color="primary" block tile dark>Version 1.0.0</v-btn>
    </div>
  </template>

</v-navigation-drawer> 

Answer 1

Я добавил абсолютную позицию, чтобы версия всегда отображалась внизу

Вот рабочий код: https://codepen.io/chansv/pen/pojpWpB?editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-card
            height="100%"
    >
      <v-app-bar
        color="deep-purple"
        dark
      >
        <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>
      </v-app-bar>

      <v-navigation-drawer
        v-model="drawer"
        absolute
        temporary
      >
        <v-list
          nav
          dense
        >
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-home</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-account</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Account</v-list-item-title>
            </v-list-item>

          </v-list-item-group>
        </v-list>
        <div style="position: absolute; bottom: 0; width: 100%;"><v-btn color="primary" block tile dark>Version 1.0.0</v-btn></div>
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    drawer: false,
  }),
})