Vue를 사용하여 이미지용 QR 코드를 생성하는 방법은 무엇입니까?

npm install qrcodejs

<template>
  <div>
    <div ref="qrcode" :style="`width: ${size}px; height: ${size}px`"></div>
    <img :src="qrCodeImage" :alt="text" :  style="max-width:90%">
  </div>
</template>

<script>
import QRCode from 'qrcodejs'

export default {
  props: {
    text: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      qrCodeImage: '',
    }
  },
  mounted() {
    this.generateQRCode()
  },
  methods: {
    generateQRCode() {
      const qrcode = new QRCode(this.$refs.qrcode, {
        text: this.text,
        width: this.size,
        height: this.size,
      })
      this.qrCodeImage = qrcode.toDataURL()
    },
  },
}
</script>

<template>
  <div>
    <qrcode text="https://example.com" size="300"></qrcode>
  </div>
</template>

<script>
import Qrcode from '@/components/Qrcode.vue'

export default {
  components: {
    Qrcode,
  },
}
</script>