Resolving JavaScript errors

As with the team-member component, you are going to experience some errors in your JavaScript console. These can be resolved by copying the filter data object and both the changeFilter and isActiveFilterSelected methods from the parent instance. We'll leave them in both the component and parent instance for now, but we'll remove the duplication later:

      Vue.component('filtering', {
        template: '#filtering-template',
   
        data() {
          return {
            filter: {
              field: '',
              query: ''
            }
          }
        },
   
        methods: {
          isActiveFilterSelected() {
            return (this.filter.field === 'isActive');
          },
     
          changeFilter(event) {
            this.filter.query = '';
            this.filter.field = event.target.value;
          }
        }
      });

Running the app will show both the filters and person listing, but the filters won't update the people list as they are not communicating yet.