Repository: DevExpress/devextreme-vue (ts)

Issue:
DxDataGrid.cellTemplate fails to work with a slot
### Current Behavior
produces an error
```console
[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON"
```

### Expected Behavior
renders template correctly

### Steps to Reproduce
create a named slot within a dataGrid instance and try to use it as a cellTemplate

### Demo
```html
<template>
  <div>
      <dx-button
      text="test123"
      @click="testFunc"
      />
    <dx-data-grid
        :dataSource="items"
        :columns="columns"
        >
        <div slot="test" slot-scope="data" >
            <i>This is my template for {{data}}</i>
        </div>
    </dx-data-grid>
  </div>
</template>
<script>

import { DxDataGrid, DxButton, DxList } from 'devextreme-vue';

export default {
  props: ['items'],
  data() {
    return {
      columns: [
          {
              dataField: 'name',
              caption: 'Name'
          },
          {
              dataField: 'email',
              caption: 'E-mail'
          },
          {
              dataField: 'status',
              caption: 'Status'
          },
          {
              dataField: '',
              caption: 'Akcje',
              cellTemplate: "test"
          }
      ]
    };
  },
  methods: {
      testFunc: function() {
          console.log('testest1213123');
      }
  },
  components: {
    DxDataGrid,
    DxButton,
    DxList
  }
}
</script>
```
### Environment Details
DevExtreme 18.1.1-pre-18101
DevExtreme Vue 18.1.1-alpha.2

Pull request description:
Fix the unwrapping template container issue 
Resolves #48 

Patch:
diff --git a/example/components/grid-example.vue b/example/components/grid-example.vue
index 3749eaa..ff7c40b 100644
--- a/example/components/grid-example.vue
+++ b/example/components/grid-example.vue
@@ -11,14 +11,17 @@
             :filterRow="{ visible: true }"
             :selectedRowKeys="selectedRowKeys"
             :columns="columns"
-        />
+        >
+          <dx-button slot="cell-city" slot-scope="data" :text="data.text" />
+        </dx-data-grid>
     </example-block>
 </template>
 
 <script>
 import ExampleBlock from "./example-block";
 import { sales } from "../data";
-import { DxDataGrid } from "../../src";
+import { DxDataGrid, DxButton } from "../../src";
+import Vue from "vue";
 
 const selectedKeys = [10273, 10277, 10292, 10295, 10300, 10302, 10305, 10308, 10312, 
 10319, 10321, 10323, 10326, 10328, 10331, 10334, 10335, 10341, 10351, 10353, 10356, 
@@ -27,7 +30,8 @@ const selectedKeys = [10273, 10277, 10292, 10295, 10300, 10302, 10305, 10308, 10
 export default {
   components: {
     ExampleBlock,
-    DxDataGrid
+    DxDataGrid,
+    DxButton
   },
   data: function() {
     return {
@@ -44,7 +48,8 @@ export default {
           width: 100
         },
         {
-          dataField: "city"
+          dataField: "city",
+          cellTemplate: "cell-city"
         },
         {
           dataField: "country",
diff --git a/src/core/component.ts b/src/core/component.ts
index 775a665..b32b018 100644
--- a/src/core/component.ts
+++ b/src/core/component.ts
@@ -59,15 +59,15 @@ const DxComponent: VueConstructor = Vue.extend({
                         render: () => {
                             return template(data.model);
                         }
-                    }).$mount(document.createElement("div"));
+                    }).$mount();
 
                     const element = vm.$el;
-                    element.className = DX_TEMPLATE_WRAPPER_CLASS;
-                    data.container.appendChild(element);
+                    element.classList.add(DX_TEMPLATE_WRAPPER_CLASS);
 
-                    events.one(element, DX_REMOVE_EVENT, () => {
-                        vm.$destroy();
-                    });
+                    const container = data.container.get ? data.container.get(0) : data.container;
+                    container.appendChild(element);
+
+                    events.one(element, DX_REMOVE_EVENT, vm.$destroy);
 
                     return element;
                 }


Test patch:
diff --git a/src/core/component.test.ts b/src/core/component.test.ts
index e516e6a..cd14f7f 100644
--- a/src/core/component.test.ts
+++ b/src/core/component.test.ts
@@ -91,19 +91,19 @@ describe("option processing", () => {
     });
 });
 
-describe("templates", () => {
+describe("template", () => {
 
     const DX_TEMPLATE_WRAPPER = "dx-template-wrapper";
 
-    const renderItemTemplate: (model: object) => Element = (model: object) => {
+    function renderItemTemplate(model: object, container: any = null): Element {
         const render = WidgetClass.mock.calls[0][1].integrationOptions.templates.item.render;
         return render({
-            container: document.createElement("div"),
+            container: container || document.createElement("div"),
             model
         });
-    };
+    }
 
-    it("pass integrationOptions to widget", () => {
+    it("passes integrationOptions to widget", () => {
         new Vue({
             template: "<test-component><div slot='item' slot-scope='data'>1</div></test-component>",
             components: {
@@ -133,6 +133,53 @@ describe("templates", () => {
         expect(renderedTemplate.className).toBe(DX_TEMPLATE_WRAPPER);
         expect(renderedTemplate.innerHTML).toBe("Template with data");
     });
+
+    it("unwraps container", () => {
+        new Vue({
+            template: `<test-component>
+                            <div slot='item' slot-scope='props'>Template {{props.text}}</div>
+                        </test-component>`,
+            components: {
+                TestComponent
+            }
+        }).$mount();
+        const renderedTemplate = renderItemTemplate(
+            { text: "with data" },
+            { get: () => document.createElement("div") }
+        );
+
+        expect(renderedTemplate.nodeName).toBe("DIV");
+        expect(renderedTemplate.innerHTML).toBe("Template with data");
+    });
+
+    it("preserves classes", () => {
+        new Vue({
+            template: `<test-component>
+                            <div slot='item' slot-scope='props' class='custom-class'></div>
+                        </test-component>`,
+            components: {
+                TestComponent
+            }
+        }).$mount();
+        const renderedTemplate = renderItemTemplate({});
+
+        expect(renderedTemplate.className).toBe(`custom-class ${DX_TEMPLATE_WRAPPER}`);
+    });
+
+    it("preserves custom-attrs", () => {
+        new Vue({
+            template: `<test-component>
+                            <div slot='item' slot-scope='props' custom-attr=123 ></div>
+                        </test-component>`,
+            components: {
+                TestComponent
+            }
+        }).$mount();
+        const renderedTemplate = renderItemTemplate({});
+
+        expect(renderedTemplate.attributes).toHaveProperty("custom-attr");
+        expect(renderedTemplate.attributes["custom-attr"].value).toBe("123");
+    });
 });
 
 describe("events emitting", () => {