Example in how to use jsforce () and vue.js (). I choose not to be right in terms of pattern in lieu of didactic.

jsforce_vue.js

<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false">
<script src="//cdnjs.cloudflare.com/ajax/libs/jsforce/1.7.0/jsforce.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

<h1>Using jsforce and Vue Js</h1>

<div id="app">
	<label>
		Filter by name:
		<input v-model="name" />
	</label>
	<ul>
		<li v-for="r in results | filterBy name in 'Name' ">
			{{ r.Name }} - {{ r.Id }}
		</li>
	</ul>
</div>

<script>

// vue 
Vue.config.debug = false;

var vm = new Vue({
	el: '#app',
	data: {
		name,
		results: []
	},
	events: {
		'soqlReceiver': function (record){
			this.results.push(record)
		}
	}
});

// jsforce

function callSoqlAutofetch(){
	console.log('calling jsforce.Connection');
	var conn = new jsforce.Connection({ accessToken: '{!$API.Session_Id}' });
	
	var query = conn.query("SELECT Id, Name FROM Account")
	
		.on("record", function(record) {
			vm.$emit('soqlReceiver', record);
		})
		.on("end", function() {
			console.log("done autoFetch");
			console.log("total in database : ", query.totalSize);
			console.log("total fetched : ", query.totalFetched);
		})
		.on("error", function(err) {
			console.error(err);
		})
		.run({
			autoFetch : true, 
			maxFetch : 4000 // max of records returned 
		}); 
}

callSoqlAutofetch();


// TODO: add filter

</script>
</apex:page>