Vue + Socket.io + RethinkDB - Basic CRUD operations in realtime -

starting use vue + rethink, love concepts of both of them , starting create simple todo list. i've got skeleton app done vue + express + rethinkdb working crd (no update yet) operations. dandy, of course data not real time. when insert task/todo item, need refresh page see appear,etc.

i've looked rethinkdb's change feeds, looks interesting, i'm not 100% sure how implement them current express api setup. found few examples playing around socket.io , trying implement setup (is necessary??).

my codebase here : https://github.com/patrickbolle/vue-todo

here's example of tasklist.vue component display items -

import tasknew './tasknew' var socket = io.connect('http://localhost:8099');  export default {   components: {     tasknew   },    data () {     return {       tasks: []     }   },    created () {     this.$http.get('http://localhost:8090/api/tasks').then(response => {       this.tasks = response.data     })     var vm =     socket.on('taskssocket', function (task) {       vm.tasks.push(task)     })   }, 

this sort of works, when create new task posting api, (blank) task appears, none of pre-existing tasks shown.

here route /tasks:

//get - tasks router.get('/tasks', (req, res) => {   r.table("tasks").changes().run().then(function(cursor) {     cursor.each(function(err, task) {       io.sockets.emit("taskssocket", task);     })   }) }) 

honestly i'm confusing myself more , more, come meteor background doing web socket/api stuff confusing me. if give me pointer in right direction grateful.

essentially need : - retrieve tasks /api/tasks route - grab new tasks socket... on /api/tasks route? - display them in vue js