diff --git a/package.json b/package.json
index d796be483a..159e9737be 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
-    "@vue/web-component-wrapper": "^1.2.0",
+    "@vue/web-component-wrapper": "^1.3.0",
     "@webcomponents/scoped-custom-element-registry": "^0.0.5",
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "app-datepicker": "^5.1.0",
diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index b6f93a9584..20a952fb6c 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -5,7 +5,6 @@ import DateRangePicker from "vue2-daterange-picker";
 // @ts-ignore
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
 import { fireEvent } from "../common/dom/fire_event";
-import { Constructor } from "../types";
 
 const Component = Vue.extend({
   props: {
@@ -47,35 +46,26 @@ const Component = Vue.extend({
     },
   },
   render(createElement) {
-    // @ts-ignore
+    // @ts-expect-error
     return createElement(DateRangePicker, {
       props: {
-        // @ts-ignore
         "time-picker": this.timePicker,
-        // @ts-ignore
         "auto-apply": this.autoApply,
         opens: "right",
         "show-dropdowns": false,
-        // @ts-ignore
         "time-picker24-hour": this.twentyfourHours,
-        // @ts-ignore
         disabled: this.disabled,
-        // @ts-ignore
         ranges: this.ranges ? {} : false,
         "locale-data": {
-          // @ts-ignore
           firstDay: this.firstDay,
         },
       },
       model: {
         value: {
-          // @ts-ignore
           startDate: this.startDate,
-          // @ts-ignore
           endDate: this.endDate,
         },
         callback: (value) => {
-          // @ts-ignore
           fireEvent(this.$el as HTMLElement, "change", value);
         },
         expression: "dateRange",
@@ -106,7 +96,11 @@ const Component = Vue.extend({
   },
 });
 
-const WrappedElement: Constructor<HTMLElement> = wrap(Vue, Component);
+// Assertion corrects HTMLElement type from package
+const WrappedElement = wrap(
+  Vue,
+  Component
+) as unknown as CustomElementConstructor;
 
 @customElement("date-range-picker")
 class DateRangePickerElement extends WrappedElement {
diff --git a/yarn.lock b/yarn.lock
index 100cae2313..98593a9591 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4693,10 +4693,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/web-component-wrapper@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@vue/web-component-wrapper@npm:1.2.0"
-  checksum: 342d56d3fcebcbd94e0be984adc1163587f2d1326dcda7727d3624800be221cf0329c1c6c3f949fdc5a00c9f487946750781cf6441d1585a4fa3800d11ef939e
+"@vue/web-component-wrapper@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@vue/web-component-wrapper@npm:1.3.0"
+  checksum: 8cc4d1135990e61ab9d38a7b6460b018703b38b4dd3477390083018bffb93b283fabb7d57d83b3cfb78dd44da4f863167b964fe88dfa9886a54996f308036a94
   languageName: node
   linkType: hard
 
@@ -9315,7 +9315,7 @@ fsevents@^1.2.7:
     "@vibrant/color": ^3.2.1-alpha.1
     "@vibrant/core": ^3.2.1-alpha.1
     "@vibrant/quantizer-mmcq": ^3.2.1-alpha.1
-    "@vue/web-component-wrapper": ^1.2.0
+    "@vue/web-component-wrapper": ^1.3.0
     "@web/dev-server": ^0.0.24
     "@web/dev-server-rollup": ^0.2.11
     "@webcomponents/scoped-custom-element-registry": ^0.0.5