Version is not showing in Navigation menu Item click vuejs vuetify

Question

In my navigation menu, at bottom i am showing version but when i click on menuItems the version is showing except when i click on profile menu(as shown in the pictures). I am not able to find the reason why it is happening?

 <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

I've added a absolute position for version to always display at bottom

Here is the working codepen: 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,
  }),
})