fix vue imports

src/popup/App.vue

@@ -195,8 +195,6 @@
                               :settings="settings"
                               :site="selectedSite"
         />
-        <PerformancePanel v-if="selectedTab === 'performance-metrics'" 
-                          :performance="performance" />
         <WhatsNewPanel v-if="selectedTab === 'whats-new'" />
         <AboutPanel v-if="selectedTab === 'about'" />
         <Donate v-if="selectedTab === 'donate'" />
@@ -223,9 +221,9 @@ import ExtensionMode from '../common/enums/ExtensionMode.enum';
 import Logger from '../ext/lib/Logger';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 import { browser } from 'webextension-polyfill-ts';
+import { defineComponent } from 'vue';
 
-import Vue from '*.vue';
+export default defineComponent({
-export default Vue.extend({
   data () {
     return {
       selectedTab: 'video',

src/popup/js/PopupExec.ts

@@ -5,7 +5,7 @@ class PopupExec {
   settings: Settings;
   site: any;
   
-  constructor(settings, site) {
+  constructor(settings?, site?) {
     this.settings = settings;
     this.site = site;
   }

src/popup/panels/AboutPanel.vue

@@ -42,11 +42,11 @@ import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
 import { browser } from 'webextension-polyfill-ts';
 
-import Vue from 'vue'
+import { defineComponent } from 'vue'
-export default Vue.extend({
+export default defineComponent({
   components: {
     ShortcutButton,
- },
+  },
   data() {
     return {
       // reminder — webextension-polyfill doesn't seem to work in vue!

src/popup/panels/DefaultSettingsPanel.vue

@@ -126,10 +126,11 @@
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
 import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
-
-import Vue from 'vue'
 import PopupExec from '../js/PopupExec';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+
+
+export default defineComponent({
   data() {
     return {
     }
@@ -143,7 +144,7 @@ export default Vue.extend({
     site: String,
   },
   created() {
-    this.exec = new ExecAction(this.settings, this.site);
+    this.exec = new PopupExec(this.settings, this.site);
   },
   components: {
     ShortcutButton,

src/popup/panels/PerformancePanel.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    PERFORMANCE PANEL :: This is here for debugging purposes.
-
-    <pre>{{performance}}</pre>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-export default Vue.extend({
-  props: {
-    performance: Object,
-  },
-  watch: {
-    performance: {
-      deep: true,
-    }
-  }
-})
-</script>
-
-<style>
-
-</style>

src/popup/panels/SiteDetailsPanel.vue

@@ -134,8 +134,8 @@ import ExtensionMode from '../../common/enums/ExtensionMode.enum';
 import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 import StretchType from '../../common/enums/StretchType.enum';
 
-import Vue from 'vue'
+import { defineComponent } from 'vue'
-export default Vue.extend({
+export default defineComponent({
   components: {
     QuerySelectorSetting,
     ShortcutButton,

src/popup/panels/VideoPanel.vue

@@ -120,15 +120,16 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import PopupExec from '../js/PopupExec';
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
-import ShortcutButton from '../../common/components/ShortcutButton';
+import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
 import CropModePersistence from '../../common/enums/CropModePersistence.enum';
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
-  data() {
+   data() {
     return {
       scope: 'page',
       CropModePersistence: CropModePersistence,
@@ -181,7 +182,7 @@ export default {
       );
     }
   }
-}
+})
 </script>
 
 <style>

src/popup/panels/WhatsNewPanel.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
 
-import Vue from 'vue'
+export default defineComponent({
-export default Vue.extend({
   data () {
     return {
       BrowserDetect: BrowserDetect