title: Render QR Code from item id using separate view and component file
body: <p>I have a view file and a QR component. I need to render the QR code in my component based on the id I pass from the parent view.</p>
  
  <p>Scan.vue template:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div p-0 m-0&gt;
      &lt;div class="scanBreadcrumbs"&gt;
        &lt;h2 v-show="path"&gt;{{ path.join("/") }}&lt;/h2&gt;
        &lt;h2 v-if="path.length === 0"&gt;Show location&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div v-for="item in items" :key="item.id"&gt;
          &lt;div v-if="item.HasChildren === true"&gt;
            &lt;div class="locationBox" @click="swapComponent(item)"&gt;
              {{ item.Name }}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div v-else&gt;
            &lt;v-expansion-panel&gt;
              &lt;v-expansion-panel-content&gt;
                &lt;template v-slot:header&gt;
                  &lt;div&gt;{{ item.Name }}&lt;/div&gt;
                &lt;/template&gt;
                &lt;v-card&gt;
                  &lt;QR :value="item.Id"&gt;&lt;/QR&gt;
                &lt;/v-card&gt;
              &lt;/v-expansion-panel-content&gt;
            &lt;/v-expansion-panel&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div v-if="path.length &gt; 0"&gt;
          &lt;div class="backButton"&gt;
            &lt;v-icon @click="swapPrevious()" class="arrow"&gt;fa-arrow-left&lt;/v-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>QR.vue component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;canvas ref="barcode"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import QRCode from "qrcode";
  export default {
    name: "QR",
    props: {
      value: {
        type: String,
        required: true
      }
    },
  
    methods: {
      async render() {
        console.log("barcode");
        try {
          await QRCode.toCanvas(this.$refs.barcode, this.value, {
            errorCorrectionLevel: "H",
            width: 300,
            value() {
              this.render();
            }
          });
        } catch (e) {
          console.error(e);
        } finally {
          this.loading = false;
        }
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>No QR code is being rendered and I'm not sure why. Weird thing is I can render it using a dialog with Vuetify but if I want to render it in an expansion panel nothing show up.</p>