pass search filter to the parent

user-list-vue-webpack/src/App.vue

 <template>
   <div id="app">
     <img src="./assets/logo.png">
-    <Filters :userList="users"/>
-    <UserList/>
+    <Filters :search="searchQuery"
+             @input="search => { searchQuery = search }"/>
+    <UserList :search="searchQuery"/>
   </div>
 </template>
 
 <script>
 import UserList from './components/UserList/UserList'
 import Filters from './components/Filters'
-import fetchUsers from '@bonita/api/src/fetchUsers.js'
 
 export default {
   name: 'App',
   data () {
     return {
-      users: []
+      searchQuery: ''
     }
   },
-  created () {
-    // fetch the data when the view is created and the data is already being observed
-    fetchUsers().then((users) => { this.users = users })
-  },
   components: {
     UserList,
     Filters

user-list-vue-webpack/src/components/Filters.vue

 <template>
   <div class="filters">
-    <h1>{{ msg }}</h1>
-    <ul>
-      <li v-bind:key="user.userName" v-for="user in userList">
-        {{ user.userName }}
-      </li>
-    </ul>
-  </div>
+    <h1>Search: </h1>
+    <input v-bind:value="searchFilter"
+           v-on:input="updateSearch($event.target.value)" >
+   </div>
 </template>
 
 <script>
 
 export default {
   name: 'Filters',
-  props: ['userList'],
+  props: ['search'],
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App',
-      usersList: []
+      searchFilter: this.search
     }
   },
-  created () {
-
+  methods: {
+    updateSearch: function (value) {
+      this.$emit('input', value)
+    }
   }
 }
 </script>

user-list-vue-webpack/src/components/UserList/script.js

 import fetchUsers from '../../../../common/api/src/fetchUsers.js'
 export default {
   name: 'Users',
+  props: ['search'],
   data () {
     return {
       msg: 'Welcome to Your Vue.js App',