Vue demos. refactor type

Author: GoodDayForSurf

apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue

@@ -16,7 +16,7 @@
       :data-source="dataSource"
       :filter-value="gridFilterValue"
       :show-borders="true"
-      :columns="gridColumns"
+      :columns="fields"
       :height="300"
     />
   </div>
@@ -25,12 +25,11 @@
 import { ref } from 'vue';
 import DxFilterBuilder from 'devextreme-vue/filter-builder';
 import DxButton from 'devextreme-vue/button';
-import DxDataGrid, { type DxDataGridTypes } from 'devextreme-vue/data-grid';
+import DxDataGrid from 'devextreme-vue/data-grid';
 import { DataSource, ODataStore } from 'devextreme-vue/common/data';
 import { filter, fields } from './data.ts';
 
 const filterValue = ref(filter);
-const gridColumns = fields as DxDataGridTypes.Column[];
 const gridFilterValue = ref(filter);
 const dataSource = new DataSource({
   store: new ODataStore({

apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/data.ts

@@ -1,4 +1,5 @@
 import { type DxFilterBuilderTypes } from 'devextreme-vue/filter-builder';
+import { type DxDataGridTypes } from "devextreme-vue/cjs/data-grid";
 
 export const filter = [
   ['Product_Current_Inventory', '<>', 0],
@@ -10,13 +11,13 @@ export const filter = [
   ],
 ];
 
-export const fields: DxFilterBuilderTypes.Field[] = [
+export const fields: (DxFilterBuilderTypes.Field & DxDataGridTypes.Column)[] = [
   {
     caption: 'ID',
     dataField: 'Product_ID',
     dataType: 'number',
     width: 50,
-  } as DxFilterBuilderTypes.Field, {
+  }, {
     dataField: 'Product_Name',
     dataType: 'string',
   }, {