roelvan/app.js

## app.js
var socket = io();
var app = feathers();
app.configure(feathers.socketio(socket));

var taskService = app.service('tasks');

Vue.component('app-segment', {
  template: '#segment-template',
  props: ['task'],
  methods: {
    deleteTask: function(task) {
      var vm = this;
      taskService.remove(task._id).then(function(task) {
        vm.$dispatch('delete-task', task);
      });
    }
  }
})

var vm = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    tasks: []
  },
  ready: function() {
    taskService.find({
      query: {
        $sort: { createdAt: -1 },
        $limit: 10
      }
    }).then(function(page) {
      vm.tasks = page.data;
    });
  },
  events: {
    'delete-task': function(task) {
      console.log(task.text);
      // this.tasks.$remove(task);
      // this.tasks.push({text: 'LORUM'})
    }
  },
  methods: {
    addTask: function() {
      taskService.create({
        text: vm.newTodo
      }).then(function () {
        vm.tasks.unshift({text: vm.newTodo});
        vm.newTodo = '';
      });
    }
  }
});

## index.html
<html>
  <head>
    <title>Welcome to Feathers</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
  </head>
  <body>
    <div class="ui hidden divider"></div>
    <div class="ui container" id="app">
      <div class="ui raised segment">
        <div class="ui input">
          <input type="text" v-model="newTodo" placeholder="Add todo..." @keyup.enter="addTask">
        </div>
      </div>
      <div class="ui segments" v-show="tasks.length">
        <app-segment v-for="task in tasks" track-by="_id" :task="task"></app-segment>
      </div>
    </div>
    <template id="segment-template">
      <div class="ui segment">
        <p><i @click="deleteTask(task)" class="trash icon"></i> {{ task.text }}</p>
      </div>
    </template>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
    <script src="//npmcdn.com/feathers-client@^1.0.0/dist/feathers.js"></script>
    <script src="socket.io/socket.io.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>
	var socket = io();
	var app = feathers();
	app.configure(feathers.socketio(socket));

	var taskService = app.service('tasks');

	Vue.component('app-segment', {
	template: '#segment-template',
	props: ['task'],
	methods: {
	deleteTask: function(task) {
	var vm = this;
	taskService.remove(task._id).then(function(task) {
	vm.$dispatch('delete-task', task);
	});
	}
	}
	})

	var vm = new Vue({
	el: '#app',
	data: {
	newTodo: '',
	tasks: []
	},
	ready: function() {
	taskService.find({
	query: {
	$sort: { createdAt: -1 },
	$limit: 10
	}
	}).then(function(page) {
	vm.tasks = page.data;
	});
	},
	events: {
	'delete-task': function(task) {
	console.log(task.text);
	// this.tasks.$remove(task);
	// this.tasks.push({text: 'LORUM'})
	}
	},
	methods: {
	addTask: function() {
	taskService.create({
	text: vm.newTodo
	}).then(function () {
	vm.tasks.unshift({text: vm.newTodo});
	vm.newTodo = '';
	});
	}
	}
	});
	<html>
	<head>
	<title>Welcome to Feathers</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
	</head>
	<body>
	<div class="ui hidden divider"></div>
	<div class="ui container" id="app">
	<div class="ui raised segment">
	<div class="ui input">
	<input type="text" v-model="newTodo" placeholder="Add todo..." @keyup.enter="addTask">
	</div>
	</div>
	<div class="ui segments" v-show="tasks.length">
	<app-segment v-for="task in tasks" track-by="_id" :task="task"></app-segment>
	</div>
	</div>
	<template id="segment-template">
	<div class="ui segment">
	<p><i @click="deleteTask(task)" class="trash icon"></i> {{ task.text }}</p>
	</div>
	</template>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
	<script src="//npmcdn.com/feathers-client@^1.0.0/dist/feathers.js"></script>
	<script src="socket.io/socket.io.js"></script>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>