Vue Query Builder Component

<template>
    <div class="control-section">
        <div class="querybuilder-control">
            <ejs-querybuilder id="querybuilder" :dataSource="dataSource" :rule="importRules" width="70%" >
                <e-columns>
                    <e-column field='EmployeeID' label='Employee ID' type='number' />
                    <e-column field='FirstName' label='First Name' type='string' />
                    <e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values" />
                    <e-column field='Title' label='Title' type='string' />
                    <e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
                    <e-column field='Country' label='Country' type='string' />
                    <e-column field='City' label='City' type='string' />
                </e-columns>
            </ejs-querybuilder>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import * as dataSource from './data-source.json';

Vue.use(QueryBuilderPlugin);

export default Vue.extend({
  data: function() {
    return {
      dataSource: dataSource.employeeData,
      values: ['Mr.', 'Mrs.'],
      importRules: {
        'condition': 'and',
        'rules': [{
                'label': 'Employee ID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
        }
    };
  }
});
</script>