Vuejsで子コンポーネントの表示内容をクリップボードにコピー

Javascriptはあまり詳しくないAndroidエンジニアが、Nuxt.jsとVuetifyでWebページを作成している。

やりたいこと

HTMLで表示した内容をクリップボードにコピーしたい
（dataやpropsで渡した値ではない）

できたコード

これでいけた
div内の全pタグのテキストがクリップボードにコピーできた。

Copied!

<template>
  <v-layout>
    <v-btn
      icon
      fab
      color="orange"
      @click="witeToClipboard()"
    >
      <v-icon>file_copy</v-icon>
    </v-btn>

    <div id="target">
      <p>コピーしたい文章1</p>
      <p>コピーしたい文章2</p>
      <p>コピーしたい文章3</p>
    </div>
  </v-layout>
</template>

<script>
export default {
  methods: {
    witeToClipboard() {
      const copyText = this.$el.querySelector('#target').textContent
      navigator.clipboard
        .writeText(copyText)
        .then(() => {
          console.log('テキストコピー完了')
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

参考ページ

• An Example of the Async Clipboard API with Vue.js https://www.raymondcamden.com/2018/04/19/an-example-of-the-async-clipboard-api-with-vuejs
• https://jp.vuejs.org/v2/api/index.html#vm-el