diff --git a/demo/App.vue b/demo/App.vue
index 5ca5b5b..9ad2c22 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -12,8 +12,8 @@
     <div style="height: calc(100vh - 30px); width: 80%; margin: 0 auto">
       <PDFViewer
         :source="pdfSource"
-        @download="handleDownload"
         :settings="{ defaultZoom: 200 }"
+        @download="handleDownload"
       />
     </div>
 
diff --git a/src/PDFViewer.vue b/src/PDFViewer.vue
index 1dcf0ba..5bc6a63 100644
--- a/src/PDFViewer.vue
+++ b/src/PDFViewer.vue
@@ -8,7 +8,7 @@
         :controls="controls"
         :rotate="rotate"
         :isFullpage="isFullpage"
-        :filename="filename"
+        :filename="displayFilename"
         :isReady="isReady"
         @toggleFullpage="handleToggleFullpage"
         @update:page="v => (page = v)"
@@ -43,12 +43,11 @@
         :rotate="rotate"
         :style="viewerStyle"
         :isFullpage="isFullpage"
-        :filename="filename"
         @update:page="v => (page = v)"
         @update:zoom="handleUpdateZoom"
         @update:isLoading="handleUpdateLoadingState"
         @update:isRendering="handleUpdateRenderingState"
-        @update:filename="v => (filename = v)"
+        @update:filename="v => (tmpFilename = v)"
         @password-requested="handlePasswordRequest"
         @loaded="handleLoaded"
         @loading-failed="handleLoadingFailed"
@@ -90,6 +89,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    filename: {
+      type: String,
+      default: null,
+    },
   },
   components: {
     Viewer,
@@ -105,11 +108,14 @@ export default {
       zoom: 100,
       rotate: 0,
       isFullpage: false,
-      filename: '',
+      tmpFilename: '',
       seconds: 0,
     }
   },
   computed: {
+    displayFilename() {
+      return this.filename || this.tmpFilename
+    },
     isReady() {
       return !this.isLoading && !this.isRendering
     },