How to save and retrieve file using pouchdb and vue js - vue.js

Question

Can someone help me on how to upload a file on pouchdb and display those uploaded files on page. I want to upload a file including name info of that file. When I check the fetch files using the console I can see [object object]. Am I doing the right thing? Any advice is well appreciated. Here is my code.
//Notes.vue
// By the way Im using onsen ui for this
<template>
<v-ons-page>
<v-ons-list>
<v-ons-list-header>Auditing</v-ons-list-header>
<v-ons-list-item v-for="note in notes">
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<span>{{ note._attachment['files'].data }} File here</span>
</div>
</v-ons-list-item>
</v-ons-list>
// Customize form for uploading file and info
<v-ons-alert-dialog
modifier="rowfooter"
:visible.sync="dialogVisible"
>
<span slot="title">Create a Note</span>
//File name of the file
<v-ons-input float
placeholder="Name of note"
v-model="name"
>
</v-ons-input>
// File
<v-ons-input type="file" #change="onFileChange"></v-ons-input>
<v-ons-button #click="addNotes(name)">Submit</v-ons-button>
</v-ons-alert-dialog>
</v-ons-page>
</template>
//Here the methods for uploading and reading file uploaded
<script>
import PouchDB from 'pouchdb'
var db = new PouchDB('reviewerdb')
export default {
data() {
return {
dialogVisible: false,
notes: [],
file: '',
name: '',
path
}
},
mounted() {
this.getNotes();
print('notes: ' + this.notes);
},
//Methods just adding a desciption
methods: {
onFileChange(event) {
this.file = event.target.files[0];
},
addNotes() {
db.put({
_id: 'notes',
_attachments: {
"file": {
type: this.file.type,
data: this.file
}
}
})
},
getNotes() {
db.get('notes', {attachments:true}).then(function (note) {
this.notes = note;
});
}
}
}