PDF Viewer Does Not Update on Dynamic URL Change in tato30/vue-pdf

[Athirajs]

I am using tato30/vue-pdf in a Vue 3 project to display PDFs dynamically when clicking on a table row. The PDF URL updates correctly, but the viewer only displays the first clicked document. When selecting another document, the viewer does not update to show the new PDF, even though the URL is correct (verified via console logs).

It seems like usePDF() might not be reacting properly to URL changes.
Steps to Reproduce:
Render a table with multiple documents, each with a unique PDF URL.
When a user clicks a table row, the pdfUrl is updated (correct URL is logged).
The PdfViewer component is supposed to update with the new PDF, but it only shows the first document.
Example code snippet (simplified)

<script setup>
import { ref } from 'vue';
import PdfViewer from './PdfViewer.vue'; // Import the PdfViewer component

const pdfUrl = ref('');
const documents = [
  { id: 1, name: 'Document 1', url: 'https://example.com/doc1.pdf' },
  { id: 2, name: 'Document 2', url: 'https://example.com/doc2.pdf' },
  { id: 3, name: 'Document 3', url: 'https://example.com/doc3.pdf' }
];

const selectDocument = (url) => {
  pdfUrl.value = url;
};
</script>

<template>
  <div>
    <table>
      <tr v-for="doc in documents" :key="doc.id" @click="selectDocument(doc.url)">
        <td>{{ doc.name }}</td>
      </tr>
    </table>

    <!-- Pass the selected PDF URL to PdfViewer -->
    <PdfViewer :pdfUrl="pdfUrl" />
  </div>
</template>
Pdf viewer.vue
<script setup>
import { ref, watch, onMounted } from 'vue';
import { usePDF } from '@tato30/vue-pdf'; // Import the usePDF hook

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  }
});

const { pdf, pages } = usePDF(props.pdfUrl);

// Watch for changes in the `pdfUrl` prop and update the PDF accordingly
watch(() => props.pdfUrl, (newUrl) => {
  const { pdf: newPdf, pages: newPages } = usePDF(newUrl);
  pdf.value = newPdf;
});

onMounted(() => {
  if (props.pdfUrl) {
    const { pdf: initialPdf } = usePDF(props.pdfUrl);
    pdf.value = initialPdf;
  }
});
</script>

<template>
  <div>
    <vue-pdf :pdf="pdf" />
  </div>
</template>

[vordimous]

I think your issue is that you aren't passing in a Ref to the usePDF function. The multiple PDF example has a single const pdfSource = ref('') can be used to update the url that the usePDF function uses to render.

I think your code won't need the mounted function piece and will look something like this:

const pdfSource = ref(props.pdfUrl || '')
const { pdf, pages } = usePDF(pdfSource);

// Watch for changes in the `pdfUrl` prop and update the PDF accordingly
watch(() => props.pdfUrl, (newUrl) => {
  pdfSource.value = newPdf;
});