Vuetifyのv-messages

Vuetifyにはv-messagesというメッセージ表示のコンポーネントがあります。
v-text-fieldなどでerror-messagesやsuccess-messagesを設定するとv-messagesコンポーネントを使って表示されます。
しかし、v-messages自体は公式サイトのドキュメントには説明がありません。
通常は他のコンポーネントに含まれる形で使われるからでしょう。
それでも、v-messages単体で使いたい場合もあります。
今回はv-messages単体での使い方をまとめました。

使用するVuetifyは、
v2.2.1
です。

$ vue create my-app
$ cd my-app/
$ vue add vuetify
$ npm run serve

src/components/HelloWorld.vueを書き換えます。
v-messagesのpropsはvalueがあります。
重要な点は、valueに渡されるデータは文字列の配列です
参照 （node_modules/vuetify/src/components/VMessages/VMessages.ts）

src/components/HelloWorld.vue

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-messages :value="messages"></v-messages>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'HelloWorld',

  data: () => ({
    messages: [
      'Hello!!',
      'Good Bye!!',
      'Good Night.'
    ]
  }),
};
</script>

$ npm run serve

Have a good Vuetify life