diff --git a/src/client/widgets/activity.vue b/src/client/widgets/activity.vue
index 58b1631367..1c74e3e0fa 100644
--- a/src/client/widgets/activity.vue
+++ b/src/client/widgets/activity.vue
@@ -14,13 +14,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import XCalendar from './activity.calendar.vue';
 import XChart from './activity.chart.vue';
 
-export default define({
+const widget = define({
 	name: 'activity',
 	props: () => ({
 		showHeader: {
@@ -37,7 +38,10 @@ export default define({
 			hidden: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XCalendar,
diff --git a/src/client/widgets/calendar.vue b/src/client/widgets/calendar.vue
index 8ef74ff744..4079edaaf0 100644
--- a/src/client/widgets/calendar.vue
+++ b/src/client/widgets/calendar.vue
@@ -32,9 +32,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'calendar',
 	props: () => ({
 		transparent: {
@@ -42,7 +43,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	data() {
 		return {
 			now: new Date(),
diff --git a/src/client/widgets/clock.vue b/src/client/widgets/clock.vue
index 6388324125..cdc2817d06 100644
--- a/src/client/widgets/clock.vue
+++ b/src/client/widgets/clock.vue
@@ -7,11 +7,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
 import MkContainer from '../components/ui/container.vue';
 import MkAnalogClock from '../components/analog-clock.vue';
 
-export default define({
+const widget = define({
 	name: 'clock',
 	props: () => ({
 		transparent: {
@@ -19,7 +20,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		MkAnalogClock
diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index c91a2f992a..fb9511023e 100644
--- a/src/client/widgets/define.ts
+++ b/src/client/widgets/define.ts
@@ -16,12 +16,6 @@ export default function <T extends Form>(data: {
 			}
 		},
 
-		data() {
-			return {
-				bakedOldProps: null
-			};
-		},
-
 		computed: {
 			id(): string {
 				return this.widget.id;
diff --git a/src/client/widgets/digital-clock.vue b/src/client/widgets/digital-clock.vue
index 0e68fe0ff4..744ede3e3a 100644
--- a/src/client/widgets/digital-clock.vue
+++ b/src/client/widgets/digital-clock.vue
@@ -13,9 +13,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'digitalClock',
 	props: () => ({
 		transparent: {
@@ -32,7 +33,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	data() {
 		return {
 			clock: null,
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 7bafb67c8a..bd9702623d 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -19,12 +19,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import MkMiniChart from '../components/mini-chart.vue';
 
-export default define({
+const widget = define({
 	name: 'federation',
 	props: () => ({
 		showHeader: {
@@ -32,7 +33,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer, MkMiniChart
 	},
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index 0d319b225e..d357ba7a0b 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -10,11 +10,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'memo',
 	props: () => ({
 		showHeader: {
@@ -22,7 +23,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer
 	},
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 24d7fe4200..5ec0164f98 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -9,12 +9,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import XNotifications from '../components/notifications.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'notifications',
 	props: () => ({
 		showHeader: {
@@ -26,7 +27,10 @@ export default define({
 			default: 300,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XNotifications,
diff --git a/src/client/widgets/photos.vue b/src/client/widgets/photos.vue
index 2b8399df9b..2717bc87de 100644
--- a/src/client/widgets/photos.vue
+++ b/src/client/widgets/photos.vue
@@ -15,12 +15,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faCamera } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 
-export default define({
+const widget = define({
 	name: 'photos',
 	props: () => ({
 		showHeader: {
@@ -32,7 +33,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 	},
diff --git a/src/client/widgets/rss.vue b/src/client/widgets/rss.vue
index 3a76c8fb4f..253d42ecaa 100644
--- a/src/client/widgets/rss.vue
+++ b/src/client/widgets/rss.vue
@@ -13,11 +13,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'rss',
 	props: () => ({
 		showHeader: {
@@ -29,7 +30,10 @@ export default define({
 			default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer
 	},
diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue
index ca6af76126..bd0b7ba0c9 100644
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -20,13 +20,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import XTimeline from '../components/timeline.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'timeline',
 	props: () => ({
 		showHeader: {
@@ -48,7 +49,10 @@ export default define({
 			hidden: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XTimeline,
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index b439f91d54..22681fc73a 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -18,12 +18,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import MkMiniChart from '../components/mini-chart.vue';
 
-export default define({
+const widget = define({
 	name: 'hashtags',
 	props: () => ({
 		showHeader: {
@@ -31,7 +32,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer, MkMiniChart
 	},
diff --git a/src/client/widgets/welcome.vue b/src/client/widgets/welcome.vue
index f6169935f0..71398f779a 100644
--- a/src/client/widgets/welcome.vue
+++ b/src/client/widgets/welcome.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import XSigninDialog from '../components/signin-dialog.vue';
 import XSignupDialog from '../components/signup-dialog.vue';
@@ -18,11 +19,14 @@ import MkButton from '../components/ui/button.vue';
 import { host } from '../config';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'welcome',
 	props: () => ({
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkButton
 	},