To emit the query field, we are going to use a new Vue key that we have not used before, called watch. The watch function tracks a data property and can run methods based on the output. The other thing it is able to do is to emit events. As both, our text field and radio buttons are set to update the field.query variable, we will create a new watch function on this.
Create a new watch object after the methods on your component:
watch: { 'filter.query': function() { } }
The key is the variable you wish to watch. As ours contains a dot, it needs to be wrapped in quotes. Within this function, create a new $emit event of change-filter-query that outputs the value of filter.query:
watch: { 'filter.query': function() ...
