Vuejs vue-router for pouchdb; sync to couchdb; with vue-strap

Vuejs vue-router for pouchdb; sync to couchdb; with vue-strap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.3/vue-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/5.1.0/pouchdb.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/0.7.7/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsondiffpatch/0.1.38/jsondiffpatch-full.min.js"></script>
<div id="app">
  <p>
    <a v-link="{ path: '/opendb' }">Open db</a>
    <a v-link="{ path: '/couchview/dummy' }">Couch view</a>
    <a v-link="{ path: '/couchview/alldocs' }">All docs</a>
    <a v-show="hS.drafts" v-link="{path: '/couchview/drafts'}">Drafts</a>
  </p>
  <router-view></router-view>
  <pre>{{hS.drafts | json}}</pre>
</div>

<template id=input-box>
  <div>
    <label for="{{iid}}">{{titl}}</label>
  	<input type="{{typ}}" v-model="modl" @change="$dispatch('dirty-doc')" placeholder="{{labl}}" id={{iid}} class="form-control">
  </div>
</template>

<template id="pouchdb-open">
  <div class="panel panel-default panel-body">
    <div class="form-group">
      <input-box labl="Local DB name" iid="localdbname" :modl.sync="settings.local_db.name"></input-box>
    </div>
    <button @click="openlocdb">Open local DB</button>
  </div>
  <div class="panel panel-default panel-body">
    <div class="form-group">
      <input-box v-for="setting in settings.remote_db" :labl="'Remote DB ' + $key" :iid="$key" :modl.sync="setting"></input-box>
    </div>
    <button @click="openremdb">Open remote DB</button>
    or
    <button @click="opendbs">Open both DBs with sync</button>
  </div>
  <div class="panel panel-default panel-body">
    <div class="form-group">
    <input-box labl="Secret...

JavaScript

var hub = {
  state: { 	
    		db1: null,
      	dbs: null,
        drafts: false // to contain associative array of drafts
  },
  setState: function (item, val) {
  	this.state[item] = val;
  }
};

Vue.component('input-box', {
  template: '#input-box',
  props: ['labl', 'iid', 'modl'],
  computed: {
    typ: function () {
    	s = this.labl.toLowerCase();
      return ( (s.includes('password') || s.includes('secret'))? 'password' : 'text');
    },
    titl: function() {
    	return _.capitalize(_.startCase(this.labl).toLowerCase());
    }
  }
});

Vue.component('pouchdb-open', {
  template: '#pouchdb-open',
  data: function() { return {
		settings: {
    	local_db: {
      	name: 'testdb01'
      },
      remote_db: {
      	url: null,
      	username: null,
   			password: null
      }
    },
    secret: null,
  }},
  props: ['db1', 'dbs'],
  methods: {
  	load: function () {
			this.settings = JSON.parse(CryptoJS.AES.decrypt(localStorage.getItem('db_settings'), this.secret).toString(CryptoJS.enc.Latin1));
  	},
  	save: function () {
  		localStorage.setItem('db_settings',CryptoJS.AES.encrypt(JSON.stringify(this.settings), this.secret))
    },
    list: function() {
 	  	for ( var i = 0, len = localStorage.length; i<len; ++i ) {
      	var enc = localStorage.getItem( localStorage.key(i) );
        if (enc.slice(0,4) == "U2Fs") {
        	console.log(localStorage.key(i), CryptoJS.AES.decrypt(enc, this.secret).toString(CryptoJS.enc.Latin1));
        }
      }
    },
    openlocdbcore: function() {
  		this.db1 = new PouchDB(this.settings.local_db.name);
  	},
  	openremdbcore: function () {
   		var options = {auth:{}};
   		options.auth.username = this.settings.remote_db.username;
   		options.auth.password = this.settings.remote_db.password;
    	this.dbs = new PouchDB(this.settings.remote_db.url, options);
  	},
    openlocdb: function() {
    	this.openlocdbcore();
      this.$dispatch('ready');
		},
  	openremdb: function () {
    	this.openremdbcore();
   ...