Creating the component

As with the team-member component, declare a new Vue.component() in your JavaScript, referencing a template ID of #filtering-template. Create a new <script> template block in your view and give it the same ID. Replace the filtering form in the view with a <filtering> custom HTML template and put the form inside your filtering-template script block.

Your view should look like the following:

      <p id="app">
       <filtering></filtering>
       <table>
         <template v-for="inpidual in people">
           <team-member v-bind:person="inpidual" v-
            bind:filter="filter" v-
            bind:statusfilter="isActiveFilterSelected()">           </team-member>
         </template>
       </table>
      </p>

      <script type="text/x-template" id="filtering-
      template">
        <form>
          <label for="fiterField">
            Field:
            <select v-on:change="changeFilter($event)"                 id="filterField">
           <option value="">Disable filters</option>
           <option value="isActive">Active user</option>
           <option value="name">Name</option>
           <option value="email">Email</option>
           <option value="balance">Balance</option>
           <option value="registered">Date      
            registered</option>
           </select>
         </label>
        <label for="filterQuery" v-show="this.filter.field 
         && !isActiveFilterSelected()">
            Query:
            <input type="text" id="filterQuery" v-
            model="filter.query">
          </label>
          <span v-show="isActiveFilterSelected()">
            Active:
         <label for="userStateActive">
            Yes:
             <input type="radio" v-bind:value="true"                 id="userStateActive" v-model="filter.query">
          </label>
            <label for="userStateInactive">
            No:
        <input type="radio" v-bind:value="false" 
        id="userStateInactive" v-model="filter.query">
         </label>
       </span>
      </form>
     </script>
      <script type="text/x-template" id="team-member-
       template">
       // Team member template
    </script>

And you should have the following in your JavaScript:

      Vue.component('filtering', {
        template: '#filtering-template'
      });