diff --git a/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php b/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php
index 8a74c6dfe..c4b626801 100755
--- a/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php
@@ -379,13 +379,15 @@
 
             template: '#date-filter-template',
 
-            data: () => ({
-                start: "{{ $startDate->format('Y-m-d') }}",
-                end: "{{ $endDate->format('Y-m-d') }}",
-            }),
+            data: function() {
+                return {
+                    start: "{{ $startDate->format('Y-m-d') }}",
+                    end: "{{ $endDate->format('Y-m-d') }}",
+                }
+            },
 
             methods: {
-                applyFilter(field, date) {
+                applyFilter: function(field, date) {
                     this[field] = date;
 
                     window.location.href = "?start=" + this.start + '&end=' + this.end;
diff --git a/packages/Webkul/Shop/package.json b/packages/Webkul/Shop/package.json
index 43461c32f..b9aec46f8 100755
--- a/packages/Webkul/Shop/package.json
+++ b/packages/Webkul/Shop/package.json
@@ -18,9 +18,9 @@
     "vue": "^2.1.10"
   },
   "dependencies": {
+    "ez-plus": "^1.2.1",
     "vee-validate": "2.0.0-rc.26",
     "vue-flatpickr": "^2.3.0",
-    "vue-slider-component": "^2.7.5",
-    "ez-plus": "^1.2.1"
+    "vue-slider-component": "^2.7.5"
   }
 }
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
index 61d50b7b0..5230ba93b 100755
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
@@ -116,7 +116,7 @@
         var shippingHtml = '';
         var paymentHtml = '';
         var reviewHtml = '';
-        var summaryHtml = Vue.compile(`<?php echo view('shop::checkout.total.summary', ['cart' => $cart])->render(); ?>`);
+        var summaryHtml = '';
         var customerAddress = null;
 
         @auth('customer')
@@ -132,7 +132,7 @@
             template: '#checkout-template',
             inject: ['$validator'],
 
-            data() {
+            data: function() {
                 return {
                     currentStep: 1,
                     completedStep: 0,
@@ -159,7 +159,7 @@
                 }
             },
 
-            created() {
+            created: function() {
                 if(! customerAddress) {
                     this.new_shipping_address = true;
                     this.new_billing_address = true;
@@ -184,35 +184,37 @@
             },
 
             methods: {
-                navigateToStep (step) {
+                navigateToStep: function(step) {
                     if (step <= this.completedStep) {
                         this.currentStep = step
                         this.completedStep = step - 1;
                     }
                 },
 
-                haveStates(addressType) {
+                haveStates: function(addressType) {
                     if (this.countryStates[this.address[addressType].country] && this.countryStates[this.address[addressType].country].length)
                         return true;
 
                     return false;
                 },
 
-                validateForm: function (scope) {
-                    this.$validator.validateAll(scope).then((result) => {
+                validateForm: function(scope) {
+                    var this_this = this;
+
+                    this.$validator.validateAll(scope).then(function (result) {
                         if (result) {
                             if (scope == 'address-form') {
-                                this.saveAddress()
+                                this_this.saveAddress();
                             } else if (scope == 'shipping-form') {
-                                this.saveShipping()
+                                this_this.saveShipping();
                             } else if (scope == 'payment-form') {
-                                this.savePayment()
+                                this_this.savePayment();
                             }
                         }
                     });
                 },
 
-                saveAddress () {
+                saveAddress: function() {
                     var this_this = this;
 
                     this.disable_button = true;
@@ -234,7 +236,7 @@
                         })
                 },
 
-                saveShipping () {
+                saveShipping: function() {
                     var this_this = this;
 
                     this.disable_button = true;
@@ -256,7 +258,7 @@
                         })
                 },
 
-                savePayment () {
+                savePayment: function() {
                     var this_this = this;
 
                     this.disable_button = true;
@@ -278,7 +280,7 @@
                         })
                 },
 
-                placeOrder () {
+                placeOrder: function() {
                     var this_this = this;
 
                     this.disable_button = true;
@@ -302,7 +304,7 @@
                         })
                 },
 
-                handleErrorResponse (response, scope) {
+                handleErrorResponse: function(response, scope) {
                     if (response.status == 422) {
                         serverErrors = response.data.errors;
                         this.$root.addServerErrors(scope)
@@ -313,19 +315,19 @@
                     }
                 },
 
-                shippingMethodSelected (shippingMethod) {
+                shippingMethodSelected: function(shippingMethod) {
                     this.selected_shipping_method = shippingMethod;
                 },
 
-                paymentMethodSelected (paymentMethod) {
+                paymentMethodSelected: function(paymentMethod) {
                     this.selected_payment_method = paymentMethod;
                 },
 
-                newBillingAddress() {
+                newBillingAddress: function() {
                     this.new_billing_address = true;
                 },
 
-                newShippingAddress() {
+                newShippingAddress: function() {
                     this.new_shipping_address = true;
                 }
             }
@@ -335,7 +337,7 @@
         Vue.component('summary-section', {
             inject: ['$validator'],
 
-            data() {
+            data: function() {
                 return {
                     templateRender: null
                 }
@@ -343,7 +345,7 @@
 
             staticRenderFns: summaryTemplateRenderFns,
 
-            mounted() {
+            mounted: function() {
                 this.templateRender = summaryHtml.render;
 
                 for (var i in summaryHtml.staticRenderFns) {
@@ -351,7 +353,7 @@
                 }
             },
 
-            render(h) {
+            render: function(h) {
                 return h('div', [
                     (this.templateRender ?
                         this.templateRender() :
@@ -364,7 +366,7 @@
         Vue.component('shipping-section', {
             inject: ['$validator'],
 
-            data() {
+            data: function() {
                 return {
                     templateRender: null,
                     selected_shipping_method: '',
@@ -373,7 +375,7 @@
 
             staticRenderFns: shippingTemplateRenderFns,
 
-            mounted() {
+            mounted: function() {
                 this.templateRender = shippingHtml.render;
                 for (var i in shippingHtml.staticRenderFns) {
                     shippingTemplateRenderFns.push(shippingHtml.staticRenderFns[i]);
@@ -382,7 +384,7 @@
                 eventBus.$emit('after-checkout-shipping-section-added');
             },
 
-            render(h) {
+            render: function(h) {
                 return h('div', [
                     (this.templateRender ?
                         this.templateRender() :
@@ -391,7 +393,7 @@
             },
 
             methods: {
-                methodSelected () {
+                methodSelected: function() {
                     this.$emit('onShippingMethodSelected', this.selected_shipping_method)
 
                     eventBus.$emit('after-shipping-method-selected');
@@ -403,7 +405,7 @@
         Vue.component('payment-section', {
             inject: ['$validator'],
 
-            data() {
+            data: function() {
                 return {
                     templateRender: null,
 
@@ -415,7 +417,7 @@
 
             staticRenderFns: paymentTemplateRenderFns,
 
-            mounted() {
+            mounted: function() {
                 this.templateRender = paymentHtml.render;
 
                 for (var i in paymentHtml.staticRenderFns) {
@@ -425,7 +427,7 @@
                 eventBus.$emit('after-checkout-payment-section-added');
             },
 
-            render(h) {
+            render: function(h) {
                 return h('div', [
                     (this.templateRender ?
                         this.templateRender() :
@@ -434,7 +436,7 @@
             },
 
             methods: {
-                methodSelected () {
+                methodSelected: function() {
                     this.$emit('onPaymentMethodSelected', this.payment)
 
                     eventBus.$emit('after-payment-method-selected');
@@ -444,7 +446,7 @@
 
         var reviewTemplateRenderFns = [];
         Vue.component('review-section', {
-            data() {
+            data: function() {
                 return {
                     templateRender: null
                 }
@@ -452,7 +454,7 @@
 
             staticRenderFns: reviewTemplateRenderFns,
 
-            mounted() {
+            mounted: function() {
                 this.templateRender = reviewHtml.render;
 
                 for (var i in reviewHtml.staticRenderFns) {
@@ -460,7 +462,7 @@
                 }
             },
 
-            render(h) {
+            render: function(h) {
                 return h('div', [
                     (this.templateRender ?
                         this.templateRender() :
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php
index 268bd6277..c0e357257 100755
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/nav-menu/navmenu.blade.php
@@ -42,20 +42,22 @@ foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCateg
             categories: {
                 type: [Array, String, Object],
                 required: false,
-                default: () => ([])
+                default: (function () {
+                    return [];
+                })
             },
 
             url: String
         },
 
-        data(){
+        data: function(){
             return {
                 items_count:0
             };
         },
 
         computed: {
-            items () {
+            items: function() {
                 return JSON.parse(this.categories)
             }
         },
@@ -93,7 +95,7 @@ foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCateg
             url: String,
         },
 
-        data() {
+        data: function() {
             return {
                 items_count:0,
                 show: false,
@@ -107,11 +109,11 @@ foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCateg
         },
 
         computed: {
-            haveChildren() {
+            haveChildren: function() {
                 return this.item.children.length ? true : false;
             },
 
-            name() {
+            name: function() {
                 if (this.item.translations && this.item.translations.length) {
                     this.item.translations.forEach(function(translation) {
                         if (translation.locale == document.documentElement.lang)
diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php
index b4ee472e3..8392ac58f 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php
@@ -81,25 +81,25 @@
 
             template: '#layered-navigation-template',
 
-            data() {
+            data: function() {
                 return {
                     attributes: @json($attributeRepository->getFilterAttributes()),
                     appliedFilters: {}
                 }
             },
 
-            created () {
+            created: function () {
                 var urlParams = new URLSearchParams(window.location.search);
 
                 var entries = urlParams.entries();
 
-                for(pair of entries) {
-                   this.appliedFilters[pair[0]] = pair[1].split(',');
+                for (pair of entries) {
+                    this.appliedFilters[pair[0]] = pair[1].split(',');
                 }
             },
 
             methods: {
-                addFilters (attributeCode, filters) {
+                addFilters: function (attributeCode, filters) {
                     if (filters.length) {
                         this.appliedFilters[attributeCode] = filters;
                     } else {
@@ -109,7 +109,7 @@
                     this.applyFilter()
                 },
 
-                applyFilter () {
+                applyFilter: function () {
                     var params = [];
 
                     for(key in this.appliedFilters) {
@@ -128,28 +128,30 @@
 
             props: ['index', 'attribute', 'appliedFilterValues'],
 
-            data: () => ({
-                appliedFilters: [],
+            data: function() {
+                return {
+                    appliedFilters: [],
 
-                active: false,
+                    active: false,
 
-                sliderConfig: {
-                    value: [
-                        0,
-                        0
-                    ],
-                    max: 500,
-                    processStyle: {
-                        "backgroundColor": "#FF6472"
-                    },
-                    tooltipStyle: {
-                        "backgroundColor": "#FF6472",
-                        "borderColor": "#FF6472"
+                    sliderConfig: {
+                        value: [
+                            0,
+                            0
+                        ],
+                        max: 500,
+                        processStyle: {
+                            "backgroundColor": "#FF6472"
+                        },
+                        tooltipStyle: {
+                            "backgroundColor": "#FF6472",
+                            "borderColor": "#FF6472"
+                        }
                     }
                 }
-            }),
+            },
 
-            created () {
+            created: function () {
                 if (!this.index)
                     this.active = true;
 
@@ -165,17 +167,17 @@
             },
 
             methods: {
-                addFilter (e) {
+                addFilter: function (e) {
                     this.$emit('onFilterAdded', this.appliedFilters)
                 },
 
-                priceRangeUpdated (value) {
+                priceRangeUpdated: function (value) {
                     this.appliedFilters = value;
 
                     this.$emit('onFilterAdded', this.appliedFilters)
                 },
 
-                clearFilters () {
+                clearFilters: function () {
                     if (this.attribute.type == 'price') {
                         this.sliderConfig.value = [0, 0];
                     }
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index 8e55f6f6a..f26b42104 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -123,19 +123,19 @@
             inject: ['$validator'],
 
             methods: {
-                onSubmit (e) {
+                onSubmit: function(e) {
                     if (e.target.getAttribute('type') != 'submit')
                         return;
 
                     e.preventDefault();
 
-                    this.$validator.validateAll().then(result => {
+                    this.$validator.validateAll().then(function (result) {
                         if (result) {
-                            if (e.target.getAttribute('data-href')) {
-                                window.location.href = e.target.getAttribute('data-href');
-                            } else {
-                                document.getElementById('product-form').submit();
-                            }
+                          if (e.target.getAttribute('data-href')) {
+                            window.location.href = e.target.getAttribute('data-href');
+                          } else {
+                            document.getElementById('product-form').submit();
+                          }
                         }
                     });
                 }
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
index 71c4748f2..19ccb5b74 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
@@ -20,7 +20,7 @@
                         @else
                             <td>{{ $attribute['admin_name'] }}</td>
                         @endif
-                            <td>{{ $attribute['value'] }}</>
+                            <td>{{ $attribute['value'] }}</td>
                     </tr>
 
                 @endforeach
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index 3fd6e450e..c237f7565 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -79,7 +79,7 @@
 
                 inject: ['$validator'],
 
-                data() {
+                data: function() {
                     return {
                         config: @json($config),
 
@@ -93,7 +93,7 @@
                     }
                 },
 
-                created () {
+                created: function() {
                     this.galleryImages = galleryImages.slice(0)
 
                     var config = @json($config);
@@ -125,7 +125,7 @@
                 },
 
                 methods: {
-                    configure (attribute, value) {
+                    configure: function(attribute, value) {
                         this.simpleProduct = this.getSelectedProductId(attribute, value);
 
                         if (value) {
@@ -170,7 +170,7 @@
                         this.changeStock(this.simpleProduct);
                     },
 
-                    getSelectedIndex (attribute, value) {
+                    getSelectedIndex: function(attribute, value) {
                         var selectedIndex = 0;
 
                         attribute.options.forEach(function(option, index) {
@@ -182,7 +182,7 @@
                         return selectedIndex;
                     },
 
-                    getSelectedProductId (attribute, value) {
+                    getSelectedProductId: function(attribute, value) {
                         var options = attribute.options,
                             matchedOptions;
 
@@ -197,7 +197,7 @@
                         return undefined;
                     },
 
-                    fillSelect (attribute) {
+                    fillSelect: function(attribute) {
                         var options = this.getAttributeOptions(attribute.id),
                             prevOption,
                             index = 1,
@@ -238,7 +238,7 @@
                         }
                     },
 
-                    resetChildren (attribute) {
+                    resetChildren: function(attribute) {
                         if (attribute.childAttributes) {
                             attribute.childAttributes.forEach(function (set) {
                                 set.selectedIndex = 0;
@@ -268,7 +268,7 @@
                         }
                     },
 
-                    getAttributeOptions (attributeId) {
+                    getAttributeOptions: function (attributeId) {
                         var this_this = this,
                             options;
 
@@ -281,7 +281,7 @@
                         return options;
                     },
 
-                    reloadPrice () {
+                    reloadPrice: function () {
                         var selectedOptionCount = 0;
 
                         this.childAttributes.forEach(function(attribute) {
@@ -308,7 +308,7 @@
                         }
                     },
 
-                    changeProductImages () {
+                    changeProductImages: function () {
                         galleryImages.splice(0, galleryImages.length)
 
                         this.galleryImages.forEach(function(image) {
@@ -322,7 +322,7 @@
                         }
                     },
 
-                    changeStock(productId) {
+                    changeStock: function (productId) {
                         var inStockElement = document.getElementById('in-stock');
 
                         if (productId) {
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index 33e951c97..7d81738ad 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -56,7 +56,7 @@
 
             template: '#product-gallery-template',
 
-            data() {
+            data: function() {
                 return {
                     images: galleryImages,
 
@@ -86,14 +86,14 @@
                 }
             },
 
-            created () {
+            created: function() {
                 this.changeImage(this.images[0])
 
                 this.prepareThumbs()
             },
 
             methods: {
-                prepareThumbs () {
+                prepareThumbs: function() {
                     var this_this = this;
 
                     this_this.thumbs = [];
@@ -103,7 +103,7 @@
                     });
                 },
 
-                changeImage (image) {
+                changeImage: function(image) {
                     this.currentLargeImageUrl = image.large_image_url;
 
                     this.currentOriginalImageUrl = image.original_image_url;
@@ -111,13 +111,13 @@
                     $('img#pro-img').data('zoom-image', image.original_image_url).ezPlus();
                 },
 
-                moveThumbs(direction) {
+                moveThumbs: function(direction) {
                     let len = this.thumbs.length;
 
                     if (direction === "top") {
                         const moveThumb = this.thumbs.splice(len - 1, 1);
 
-                        this.thumbs = [moveThumb[0], ...this.thumbs];
+                        this.thumbs = [moveThumb[0]].concat((this.thumbs));
 
                         this.counter.up = this.counter.up+1;
 
@@ -126,7 +126,7 @@
                     } else {
                         const moveThumb = this.thumbs.splice(0, 1);
 
-                        this.thumbs = [...this.thumbs, moveThumb[0]];
+                        this.thumbs = [].concat((this.thumbs), [moveThumb[0]]);
 
                         this.counter.down = this.counter.down+1;
 
diff --git a/packages/Webkul/Ui/package.json b/packages/Webkul/Ui/package.json
index 8641ce6db..aed607260 100755
--- a/packages/Webkul/Ui/package.json
+++ b/packages/Webkul/Ui/package.json
@@ -19,7 +19,9 @@
     "flatpickr": "^4.4.6"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.4.4",
     "tooltip.js": "^1.3.1",
+    "url-search-params-polyfill": "^6.0.0",
     "vue-swatches": "^1.0.3"
   }
 }
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/app.js b/packages/Webkul/Ui/src/Resources/assets/js/app.js
index ef4fe5d95..f6f776a7a 100755
--- a/packages/Webkul/Ui/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Ui/src/Resources/assets/js/app.js
@@ -1,3 +1,4 @@
+
 Vue.component("flash-wrapper", require("./components/flash-wrapper"));
 Vue.component("flash", require("./components/flash"));
 Vue.component("tabs", require("./components/tabs/tabs"));
@@ -20,4 +21,8 @@ Vue.component("swatch-picker", require("./components/swatch-picker"));
 
 require('flatpickr/dist/flatpickr.css');
 
-require('vue-swatches/dist/vue-swatches.min.css');
\ No newline at end of file
+require('vue-swatches/dist/vue-swatches.min.css');
+
+require("@babel/polyfill");
+
+require('url-search-params-polyfill');
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
index 9c45da34d..24015ffe7 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
@@ -224,53 +224,55 @@
             Vue.component('datagrid-filters', {
                 template: '#datagrid-filters',
 
-                data: () => ({
-                    filterIndex: @json($results['index']),
-                    gridCurrentData: @json($results['records']),
-                    massActions: @json($results['massactions']),
-                    massActionsToggle: false,
-                    massActionTarget: null,
-                    massActionType: null,
-                    massActionValues: [],
-                    massActionTargets: [],
-                    massActionUpdateValue: null,
-                    url: new URL(window.location.href),
-                    currentSort: null,
-                    dataIds: [],
-                    allSelected: false,
-                    sortDesc: 'desc',
-                    sortAsc: 'asc',
-                    sortUpIcon: 'sort-up-icon',
-                    sortDownIcon: 'sort-down-icon',
-                    currentSortIcon: null,
-                    isActive: false,
-                    isHidden: true,
-                    searchValue: '',
-                    filterColumn: true,
-                    filters: [],
-                    columnOrAlias: '',
-                    type: null,
-                    columns : @json($results['columns']),
-                    stringCondition: null,
-                    booleanCondition: null,
-                    numberCondition: null,
-                    datetimeCondition: null,
-                    stringValue: null,
-                    booleanValue: null,
-                    datetimeValue: '2000-01-01',
-                    numberValue: 0,
-                    stringConditionSelect: false,
-                    booleanConditionSelect: false,
-                    numberConditionSelect: false,
-                    datetimeConditionSelect: false
-                }),
+                data: function() {
+                    return {
+                        filterIndex: @json($results['index']),
+                        gridCurrentData: @json($results['records']),
+                        massActions: @json($results['massactions']),
+                        massActionsToggle: false,
+                        massActionTarget: null,
+                        massActionType: null,
+                        massActionValues: [],
+                        massActionTargets: [],
+                        massActionUpdateValue: null,
+                        url: new URL(window.location.href),
+                        currentSort: null,
+                        dataIds: [],
+                        allSelected: false,
+                        sortDesc: 'desc',
+                        sortAsc: 'asc',
+                        sortUpIcon: 'sort-up-icon',
+                        sortDownIcon: 'sort-down-icon',
+                        currentSortIcon: null,
+                        isActive: false,
+                        isHidden: true,
+                        searchValue: '',
+                        filterColumn: true,
+                        filters: [],
+                        columnOrAlias: '',
+                        type: null,
+                        columns : @json($results['columns']),
+                        stringCondition: null,
+                        booleanCondition: null,
+                        numberCondition: null,
+                        datetimeCondition: null,
+                        stringValue: null,
+                        booleanValue: null,
+                        datetimeValue: '2000-01-01',
+                        numberValue: 0,
+                        stringConditionSelect: false,
+                        booleanConditionSelect: false,
+                        numberConditionSelect: false,
+                        datetimeConditionSelect: false
+                    }
+                },
 
                 mounted: function() {
                     this.setParamsAndUrl();
                 },
 
                 methods: {
-                    getColumnOrAlias(columnOrAlias) {
+                    getColumnOrAlias: function(columnOrAlias) {
                         this.columnOrAlias = columnOrAlias;
 
                         for(column in this.columns) {
@@ -317,14 +319,14 @@
                         }
                     },
 
-                    nullify() {
+                    nullify: function() {
                         this.stringCondition = null;
                         this.datetimeCondition = null;
                         this.booleanCondition = null;
                         this.numberCondition = null;
                     },
 
-                    getResponse() {
+                    getResponse: function() {
                         label = '';
 
                         for(colIndex in this.columns) {
@@ -354,7 +356,7 @@
                         }
                     },
 
-                    sortCollection(alias) {
+                    sortCollection: function(alias) {
                         label = '';
 
                         for(colIndex in this.columns) {
@@ -367,14 +369,14 @@
                         this.formURL("sort", alias, this.sortAsc, label);
                     },
 
-                    searchCollection(searchValue) {
+                    searchCollection: function(searchValue) {
                         label = 'Search';
 
                         this.formURL("search", 'all', searchValue, label);
                     },
 
                     // function triggered to check whether the query exists or not and then call the make filters from the url
-                    setParamsAndUrl() {
+                    setParamsAndUrl: function() {
                         params = (new URL(window.location.href)).search;
 
                         if (params.slice(1, params.length).length > 0) {
@@ -397,7 +399,7 @@
                         }
                     },
 
-                    findCurrentSort() {
+                    findCurrentSort: function() {
                         for(i in this.filters) {
                             if (this.filters[i].column == 'sort') {
                                 this.currentSort = this.filters[i].val;
@@ -411,7 +413,7 @@
                         }
                     },
 
-                    changeMassActionTarget() {
+                    changeMassActionTarget: function() {
                         if (this.massActionType == 'delete') {
                             for(i in this.massActionTargets) {
                                 if (this.massActionTargets[i].type == 'delete') {
@@ -436,7 +438,7 @@
                     },
 
                     //make array of filters, sort and search
-                    formURL(column, condition, response, label) {
+                    formURL: function(column, condition, response, label) {
                         var obj = {};
 
                         if (column == "" || condition == "" || response == "" || column == null || condition == null || response == null) {
@@ -577,7 +579,7 @@
                     },
 
                     // make the url from the array and redirect
-                    makeURL() {
+                    makeURL: function() {
                         newParams = '';
 
                         for(i = 0; i < this.filters.length; i++) {
@@ -596,7 +598,7 @@
                     },
 
                     //make the filter array from url after being redirected
-                    arrayFromUrl() {
+                    arrayFromUrl: function() {
                         var obj = {};
                         processedUrl = this.url.search.slice(1, this.url.length);
                         splitted = [];
@@ -655,7 +657,7 @@
                         }
                     },
 
-                    removeFilter(filter) {
+                    removeFilter: function(filter) {
                         for(i in this.filters) {
                             if (this.filters[i].col == filter.col && this.filters[i].cond == filter.cond && this.filters[i].val == filter.val) {
                                 this.filters.splice(i, 1);
@@ -666,7 +668,7 @@
                     },
 
                     //triggered when any select box is clicked in the datagrid
-                    select() {
+                    select: function() {
                         this.allSelected = false;
 
                         if(this.dataIds.length == 0)
@@ -676,7 +678,7 @@
                     },
 
                     //triggered when master checkbox is clicked
-                    selectAll() {
+                    selectAll: function() {
                         this.dataIds = [];
 
                         this.massActionsToggle = true;
@@ -708,7 +710,7 @@
                         }
                     },
 
-                    doAction(e) {
+                    doAction: function(e) {
                         var element = e.currentTarget;
 
                         if (confirm('{{__('ui::app.datagrid.massaction.delete') }}')) {
@@ -728,7 +730,7 @@
                         }
                     },
 
-                    removeMassActions() {
+                    removeMassActions: function() {
                         this.dataIds = [];
 
                         this.massActionsToggle = false;