fix(vue-grid): fix spread messages property

packages/dx-vue-grid-bootstrap4/src/plugins/grouping-panel.js

@@ -10,17 +10,20 @@ const defaultMessages = {
 export const DxGroupingPanel = {
   name: 'DxGroupingPanel',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
-    const { messages } = context.props;
-
     return (
       <DxGroupingPanelBase
         layoutComponent={GroupPanelLayout}
         containerComponent={GroupPanelContainer}
         itemComponent={GroupPanelItem}
         emptyMessageComponent={GroupPanelEmptyMessage}
-        messages={{ ...defaultMessages, ...messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },

packages/dx-vue-grid-bootstrap4/src/plugins/paging-panel.js

@@ -10,13 +10,17 @@ const defaultMessages = {
 export const DxPagingPanel = {
   name: 'DxPagingPanel',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
-    const { messages } = context.props;
     return (
       <DxPagingPanelBase
         containerComponent={Pager}
-        messages={{ ...defaultMessages, ...messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },

packages/dx-vue-grid-bootstrap4/src/plugins/search-panel.js

@@ -8,12 +8,17 @@ const defaultMessages = {
 export const DxSearchPanel = {
   name: 'DxSearchPanel',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxSearchPanelBase
         inputComponent={SearchPanelInput}
-        messages={{ ...defaultMessages, ...context.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },

packages/dx-vue-grid-bootstrap4/src/plugins/table-column-visibility.js

@@ -8,12 +8,17 @@ const defaultMessages = {
 export const DxTableColumnVisibility = {
   name: 'DxTableColumnVisibility',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxTableColumnVisibilityBase
         emptyMessageComponent={EmptyMessage}
-        messages={{ ...defaultMessages, ...context.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },

packages/dx-vue-grid-bootstrap4/src/plugins/table-edit-column.js

@@ -16,14 +16,19 @@ const defaultMessages = {
 export const DxTableEditColumn = {
   name: 'DxTableEditColumn',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxTableEditColumnBase
         cellComponent={EditCommandCell}
         headerCellComponent={EditCommandHeadingCell}
         commandComponent={CommandButton}
-        messages={{ ...defaultMessages, ...context.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        messages={{ ...defaultMessages, ...context.props.messages }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },

packages/dx-vue-grid-bootstrap4/src/plugins/table-filter-row.js

@@ -1,5 +1,4 @@
 import { DxTableFilterRow as DxTableFilterRowBase } from '@devexpress/dx-vue-grid';
-
 import { TableFilterCell } from '../templates/table-filter-cell';
 import { TableRow } from '../templates/table-row';
 

packages/dx-vue-grid-bootstrap4/src/plugins/table-header-row.js

@@ -1,5 +1,4 @@
 import { DxTableHeaderRow as DxTableHeaderRowBase } from '@devexpress/dx-vue-grid';
-
 import { TableRow } from '../templates/table-row';
 import { TableHeaderCell } from '../templates/table-header-cell';
 

packages/dx-vue-grid-bootstrap4/src/plugins/table.js

@@ -19,6 +19,11 @@ const defaultMessages = {
 export const DxTable = {
   name: 'DxTable',
   functional: true,
+  props: {
+    messages: {
+      type: Object,
+    },
+  },
   render(h, context) {
     return (
       <DxTableBase
@@ -35,7 +40,7 @@ export const DxTable = {
         stubCellComponent={TableStubCell}
         stubHeaderCellComponent={TableHeaderStubCell}
         messages={{ ...defaultMessages, ...context.props.messages }}
-        {...{ attrs: context.props, on: context.listeners }}
+        {...{ attrs: context.data.attrs, on: context.listeners }}
       />
     );
   },

packages/dx-vue-grid-bootstrap4/src/plugins/toolbar.js

@@ -3,6 +3,7 @@ import { DxToolbar as Root } from '../templates/toolbar/toolbar';
 import { FlexibleSpace } from '../templates/toolbar/flexible-space';
 
 export const DxToolbar = {
+  name: 'DxToolbar',
   render() {
     return (
       <DxToolbarBase