Vuetify の toolbar内の navigation-drawer が開きません

Question

前提・実現したいこと

Vue+Vuetify+(Vuex+Vue Router+firestone)でクイズアプリを作ろうとしている初心者です。
上部のメニューバーを作成しているのですが、Vuetify の navigation-drawerが開きません。

発生している問題・エラーメッセージ

補足情報に書いた2つのサンプルプログラムから 要らない部分を削った上で、合成してメニューバーを作成しようとしています。
見た目は思い通りになったのですが、navigation-drawer が開かず メニューが出ません。

該当のソースコード

// Header.vue

<template functional>
  <div>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list class="pt-0" dense>
        <v-divider></v-divider>
        <v-list-tile v-for="item in items" :key="item.title" :to="item.to">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar dark color="primary" clipped-left fixed app>
      <v-toolbar-side-icon
        @click.stop="drawer = !drawer"
      ></v-toolbar-side-icon>
      <v-toolbar-title class="headline text-uppercase white--text">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <v-toolbar-items>
        <v-btn flat to="/">Home</v-btn>

        <v-menu
        v-if="props.loggedIn"
        auto
        offset-y
        bottom
    >
        <v-avatar slot="activator" class="ml-2 mr-5">
          <img :src="props.profile.picture" />
        </v-avatar>
        <v-list>
          <v-list-tile @click="props.logout">
            <v-list-tile-title>Logout</v-list-tile-title>
          </v-list-tile>
        </v-list>

        </v-menu>
        <v-btn
        class="mr-5"
        v-else
        flat
        @click="props.login"
        >Login</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      drawer: null,
      items: [
        { title: "Home", icon: "dashboard", to: "/" },
        { title: "About", icon: "question_answer", to: "/about" }
      ]
    };
  }
};
</script>


//App.vue

<template>
  <v-app>
    <Header
      :login="login"
      :logout="logout"
      :profile="profile"
      :loggedIn="loggedIn"
    />
    <v-content>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer app></v-footer>
  </v-app>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex';

  import Header from '@/components/Header';

  export default {
    name: 'app',

    components: { Header },

    computed: {
      ...mapGetters('user', {
        profile: 'profile',
        loggedIn: 'loggedIn'
      })
    },

    methods: {
      ...mapActions('user', {
        login: 'login',
        logout: 'logout'
      })
    }
  };
</script>

試したこと

v-toolbar, v-navigation-drawer のプロパティ変更など試しましたが どうもうまくいきません。

補足情報（FW/ツールのバージョンなど）

1.　Vuetify と Vue Router でレスポンシブなナビゲーションを作ってみました
https://qiita.com/yousakamori/items/6b5def3f3c1d1aeff5a4

2.　Building a Progressive Quiz App with Vue, Vuex, and Firestore
https://medium.com/@amenallah.hsoumi/building-a-progressive-quiz-app-with-vue-vuex-and-firestore-part-1-ce73c7ba695d

バージョン
Vue 2.6.10
Vuetify 2.0.19

Answer 1

今利用されているVuetifyのバージョンは2系ですが、参考にされている記事では1.5系を使われているようです。
２系になって消えたpropsやタグがありますので、最新のドキュメントを見られるのがよいかと思います。
https://vuetifyjs.com/en/components/toolbars

v-navigation-drawerは大丈夫そうですが、
v-toolbarまわりは変更が必要ですね。
clipped-leftのpropsもありませんし、v-toolbar-side-iconのコンポーネントもありません（替わりに v-app-bar-nav-iconを使います）

Comments

[coffeebar]

8zca様、お礼が遅れてすみません。
Vuetify2.0に下位互換性が無いことを知りませんでした。
v-app-barで作り直そうとしておりますが、どうもバージョン2へのアップデートがうまくいっていない
ようで、「v-app-bar-nav-iconは登録されてないよ」みたいなエラーが出ました。

https://qiita.com/filunK/items/e71999d5abef404744b3
https://qiita.com/hiyoko3/items/edda7901e145711de213
↑　このあたりを見て、環境を整えようとしているのですが、まだうまくいきません。
やっぱり難しいですね＞＜

[8zca]

こんばんは。
最初から2系をインストールして開発されたわけではなく、1系からアップグレードされたかんじですかね？

[coffeebar]

確か そうだったと思います。色々試しているうちに、ドツボにハマってどんどん悪化させてしまったようです。一から環境を作り直して、やってみます。一旦この質問は閉じて、また改めます。
ご回答、ありがとうございました。