Modification to existing Vue.js component

We need you to help us make a modification to an existing Vue.js component called Vue Query Builder. The existing component is almost right, but we need to make one modification: With the current Vue Query Builder, the UI requires the user to select the field that they want to add, and then click “Add Rule”. Instead, we’d like to move the field selector inline in the rule. See the attached screenshot for an example. 1. The user clicks “Add Rule” 2. A new rule appears. 3. The user can select the “label” field from the drop-down menu. 4. The operator and value fields immediately update to match the type of label field chosen. Vue Query Builder: [login to view URL] Source: [login to view URL] Demo: