chore: upgrade to Vue 2.7

packages/app-frontend/package.json

@@ -6,7 +6,6 @@
     "@pixi/events": "^6.2.0",
     "@pixi/unsafe-eval": "^6.2.0",
     "@vue-devtools/shared-utils": "^0.0.0",
-    "@vue/composition-api": "^1.4.6",
     "@vue/devtools-api": "^6.0.0-beta.9",
     "@vue/ui": "^0.12.5",
     "circular-json-es6": "^2.0.2",
@@ -21,8 +20,8 @@
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "tinycolor2": "^1.4.2",
-    "vue": "^2.6.11",
-    "vue-router": "^3.3.4",
+    "vue": "^2.7.10",
+    "vue-router": "^3.6.5",
     "vue-virtual-scroller": "^1.0.10"
   }
 }

packages/app-frontend/src/features/App.vue

@@ -7,7 +7,7 @@ import WelcomeSlideshow from './welcome/WelcomeSlideshow.vue'
 import SplitPane from './layout/SplitPane.vue'
 import AppSelectPane from './apps/AppSelectPane.vue'
 
-import { onMounted, defineComponent, ref, watch } from '@vue/composition-api'
+import { onMounted, defineComponent, ref, watch } from 'vue'
 import {
   isChrome,
   setStorage,

packages/app-frontend/src/features/apps/AppSelect.vue

@@ -2,7 +2,7 @@
 import AppHeaderSelect from '../header/AppHeaderSelect.vue'
 import AppSelectItem from './AppSelectItem.vue'
 
-import { watch, defineComponent, computed } from '@vue/composition-api'
+import { watch, defineComponent, computed } from 'vue'
 import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps'
 import { useOrientation } from '@front/features/layout/orientation'

packages/app-frontend/src/features/apps/AppSelectItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed } from 'vue'
 import { useVueVersionCheck } from './vue-version-check'
 
 export default defineComponent({

packages/app-frontend/src/features/apps/AppSelectPane.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import AppSelectPaneItem from './AppSelectPaneItem.vue'
 
-import { watch, defineComponent, ref, computed } from '@vue/composition-api'
+import { watch, defineComponent, ref, computed } from 'vue'
 import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps'
 import { useRouter } from '@front/util/router'

packages/app-frontend/src/features/apps/AppSelectPaneItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed } from 'vue'
 import { useVueVersionCheck } from './vue-version-check'
 
 export default defineComponent({

packages/app-frontend/src/features/apps/index.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed } from 'vue'
 import { BridgeEvents, Bridge } from '@vue-devtools/shared-utils'
 import { getBridge } from '@front/features/bridge'
 import { useRoute, useRouter } from '@front/util/router'

packages/app-frontend/src/features/apps/vue-version-check.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from '@vue/composition-api'
+import { ref, onMounted } from 'vue'
 import semver from 'semver'
 
 const packageData = ref<any>(null)

packages/app-frontend/src/features/bridge/index.ts

@@ -1,4 +1,4 @@
-import { onUnmounted } from '@vue/composition-api'
+import { onUnmounted } from 'vue'
 import { Bridge, BridgeEvents } from '@vue-devtools/shared-utils'
 
 let bridge: Bridge

packages/app-frontend/src/features/components/ComponentTreeNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, toRefs, onMounted, ref, watch, defineComponent, PropType } from '@vue/composition-api'
+import { computed, toRefs, onMounted, ref, watch, defineComponent, PropType } from 'vue'
 import { ComponentTreeNode } from '@vue/devtools-api'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { getComponentDisplayName, UNDEFINED, SharedData } from '@vue-devtools/shared-utils'

packages/app-frontend/src/features/components/ComponentsInspector.vue

@@ -3,7 +3,7 @@ import SplitPane from '@front/features/layout/SplitPane.vue'
 import ComponentTreeNode from './ComponentTreeNode.vue'
 import SelectedComponentPane from './SelectedComponentPane.vue'
 
-import { onMounted, ref, provide, defineComponent } from '@vue/composition-api'
+import { onMounted, ref, provide, defineComponent } from 'vue'
 import { onKeyDown } from '@front/util/keyboard'
 import { useComponentPick, useComponents, loadComponent } from './composable'
 

packages/app-frontend/src/features/components/RenderCode.vue

@@ -1,5 +1,5 @@
 <script>
-import { reactive, watch } from '@vue/composition-api'
+import { reactive, watch } from 'vue'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useBridge } from '@front/features/bridge'
 import { darkMode } from '@front/util/theme'

packages/app-frontend/src/features/components/SelectedComponentPane.vue

@@ -3,7 +3,7 @@ import StateInspector from '@front/features/inspector/StateInspector.vue'
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import RenderCode from './RenderCode.vue'
 
-import { defineComponent, ref, watch, computed } from '@vue/composition-api'
+import { defineComponent, ref, watch, computed } from 'vue'
 import { getComponentDisplayName, SharedData } from '@vue-devtools/shared-utils'
 import { onKeyDown } from '@front/util/keyboard'
 import { useSelectedComponent } from './composable'

packages/app-frontend/src/features/components/composable/components.ts

@@ -1,6 +1,5 @@
-import { ref, computed, watch, Ref, onMounted } from '@vue/composition-api'
+import Vue, { ref, computed, watch, Ref, onMounted } from 'vue'
 import { ComponentTreeNode, EditStatePayload, InspectedComponentData } from '@vue/devtools-api'
-import Vue from 'vue'
 import groupBy from 'lodash/groupBy'
 import {
   BridgeEvents,

packages/app-frontend/src/features/components/composable/highlight.ts

@@ -1,6 +1,6 @@
 import { useBridge } from '@front/features/bridge'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
-import { Ref } from '@vue/composition-api'
+import { Ref } from 'vue'
 
 export function useComponentHighlight (id: Ref<string>) {
   const { bridge } = useBridge()

packages/app-frontend/src/features/components/composable/pick.ts

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useBridge } from '@front/features/bridge'
 import { useComponentRequests, setComponentOpen } from '.'

packages/app-frontend/src/features/connection/index.ts

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 
 const isConnected = ref(false)
 const isInitializing = ref(true)

packages/app-frontend/src/features/error/ErrorOverlay.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import { useError } from '.'
 
 export default defineComponent({

packages/app-frontend/src/features/error/index.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed } from 'vue'
 
 export interface ErrorMessage {
   message: string

packages/app-frontend/src/features/header/AppHeader.vue

@@ -6,7 +6,7 @@ import AppSelect from '../apps/AppSelect.vue'
 import AppHeaderSelect from './AppHeaderSelect.vue'
 import AppMainMenu from './AppMainMenu.vue'
 
-import { computed, ref, watch, defineComponent } from '@vue/composition-api'
+import { computed, ref, watch, defineComponent } from 'vue'
 import type { RawLocation, Route } from 'vue-router'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useRoute } from '@front/util/router'

packages/app-frontend/src/features/header/AppHeaderSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, computed, watch, defineComponent } from '@vue/composition-api'
+import { ref, computed, watch, defineComponent } from 'vue'
 import { SharedData } from '@vue-devtools/shared-utils'
 import { useOrientation } from '@front/features/layout/orientation'
 

packages/app-frontend/src/features/header/AppMainMenu.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed } from 'vue'
 import { useRoute } from '@front/util/router'
 
 export default defineComponent({

packages/app-frontend/src/features/header/header.ts

@@ -1,3 +1,3 @@
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 
 export const showAppsSelector = ref(true)

packages/app-frontend/src/features/header/tabs.ts

@@ -1,4 +1,4 @@
-import { computed } from '@vue/composition-api'
+import { computed } from 'vue'
 import { useRoute } from '@front/util/router'
 
 export function useTabs () {

packages/app-frontend/src/features/inspector/DataField.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import {
   BridgeEvents,
   isPlainObject,

packages/app-frontend/src/features/inspector/StateType.vue

@@ -2,7 +2,7 @@
 import StateFields from './StateFields.vue'
 import PluginSourceIcon from '@front/features/plugin/PluginSourceIcon.vue'
 
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent } from 'vue'
 import { useComponentStateTypePlugin } from '@front/features/plugin'
 import { useOrientation } from '@front/features/layout/orientation'
 

packages/app-frontend/src/features/inspector/custom/CustomInspector.vue

@@ -4,7 +4,7 @@ import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import CustomInspectorNode from './CustomInspectorNode.vue'
 import CustomInspectorSelectedNodePane from './CustomInspectorSelectedNodePane.vue'
 
-import { watch, ref, provide, defineComponent } from '@vue/composition-api'
+import { watch, ref, provide, defineComponent } from 'vue'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useBridge } from '@front/features/bridge'
 import { useCurrentInspector } from './composable'

packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
-import Vue from 'vue'
-import { ref, computed, watch, defineComponent } from '@vue/composition-api'
+import Vue, { ref, computed, watch, defineComponent } from 'vue'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { onKeyDown } from '@front/util/keyboard'
 import { useCurrentInspector } from './composable'
@@ -48,7 +47,7 @@ export default defineComponent({
       selectNode(props.node)
     }
 
-    const selected = computed(() => inspector.value.selectedNodeId === props.node.id)
+    const selected = computed(() => inspector.value?.selectedNodeId === props.node.id)
 
     // Init selection if an id is set but the selection wasn't loaded yet
     watch(() => selected.value && inspector.value.selectedNode !== props.node, value => {

packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 
-import { watch, defineComponent, ref } from '@vue/composition-api'
+import { watch, defineComponent, ref } from 'vue'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useBridge } from '@front/features/bridge'
 import { useCurrentInspector } from './composable'

packages/app-frontend/src/features/inspector/custom/composable.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed } from 'vue'
 import { useRoute } from '@front/util/router'
 import { useApps } from '@front/features/apps'
 import { BridgeEvents, parse, searchDeepInObject, getStorage, setStorage, Bridge } from '@vue-devtools/shared-utils'

packages/app-frontend/src/features/layout/EmptyPane.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   props: {

packages/app-frontend/src/features/layout/SplitPane.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, computed, defineComponent, PropType, watch } from '@vue/composition-api'
+import { ref, computed, defineComponent, PropType, watch } from 'vue'
 import { useOrientation } from './orientation'
 import { useSavedRef } from '@front/util/reactivity'
 

packages/app-frontend/src/features/layout/orientation.ts

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 
 const orientation = ref('landscape')
 

packages/app-frontend/src/features/plugin/PluginDetails.vue

@@ -4,7 +4,7 @@ import SplitPane from '@front/features/layout/SplitPane.vue'
 import PluginPermission from './PluginPermission.vue'
 import PluginSettings from './PluginSettings.vue'
 
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent } from 'vue'
 import { usePlugins } from '.'
 
 export default defineComponent({

packages/app-frontend/src/features/plugin/PluginHome.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   props: {

packages/app-frontend/src/features/plugin/PluginListItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent } from 'vue'
 import { hasPluginPermission, PluginPermission } from '@vue-devtools/shared-utils'
 
 export default defineComponent({

packages/app-frontend/src/features/plugin/PluginPermission.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType, computed } from '@vue/composition-api'
+import { defineComponent, PropType, computed } from 'vue'
 import { hasPluginPermission, PluginPermission, setPluginPermission } from '@vue-devtools/shared-utils'
 
 export default defineComponent({

packages/app-frontend/src/features/plugin/PluginSettings.vue

@@ -2,7 +2,7 @@
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import PluginSettingsItem from './PluginSettingsItem.vue'
 
-import { defineComponent, computed, PropType } from '@vue/composition-api'
+import { defineComponent, computed, PropType } from 'vue'
 import { getPluginSettings, setPluginSettings, getPluginDefaultSettings } from '@vue-devtools/shared-utils'
 import cloneDeep from 'lodash/cloneDeep'
 import { Plugin } from '.'

packages/app-frontend/src/features/plugin/PluginSettingsItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType, computed } from '@vue/composition-api'
+import { defineComponent, PropType, computed } from 'vue'
 import { PluginSettingsItem } from '@vue/devtools-api'
 import { Plugin } from '.'
 

packages/app-frontend/src/features/plugin/PluginSourceIcon.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent } from 'vue'
 import { useRouter } from '@front/util/router'
 import { usePlugins } from '.'
 

packages/app-frontend/src/features/plugin/Plugins.vue

@@ -3,7 +3,7 @@ import SplitPane from '@front/features/layout/SplitPane.vue'
 import PluginListItem from './PluginListItem.vue'
 import PluginHome from './PluginHome.vue'
 
-import { defineComponent, ref, computed } from '@vue/composition-api'
+import { defineComponent, ref, computed } from 'vue'
 import { usePlugins } from '.'
 
 export default defineComponent({

packages/app-frontend/src/features/plugin/index.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { computed, ref } from '@vue/composition-api'
+import { computed, ref } from 'vue'
 import { PluginDescriptor } from '@vue/devtools-api'
 import { Bridge, BridgeEvents } from '@vue-devtools/shared-utils'
 import { getBridge } from '@front/features/bridge'

packages/app-frontend/src/features/settings/GlobalSettings.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 
 // import NewTag from './NewTag.vue'
 

packages/app-frontend/src/features/settings/NewTag.vue

@@ -1,6 +1,6 @@
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   inject: [

packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import { SharedData } from '@vue-devtools/shared-utils'
 
 export default defineComponent({

packages/app-frontend/src/features/timeline/LayerItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import PluginSourceIcon from '@front/features/plugin/PluginSourceIcon.vue'
 
-import { defineComponent, PropType, computed } from '@vue/composition-api'
+import { defineComponent, PropType, computed } from 'vue'
 import { useDarkMode } from '@front/util/theme'
 import { toStrHex, dimColor, boostColor } from '@front/util/color'
 import { Layer } from './composable'

packages/app-frontend/src/features/timeline/Timeline.vue

@@ -8,7 +8,7 @@ import TimelineEventList from './TimelineEventList.vue'
 import TimelineEventInspector from './TimelineEventInspector.vue'
 import AskScreenshotPermission from './AskScreenshotPermission.vue'
 
-import { computed, onMounted, ref, watch, defineComponent, onUnmounted } from '@vue/composition-api'
+import { computed, onMounted, ref, watch, defineComponent, onUnmounted } from 'vue'
 import { getStorage, SharedData } from '@vue-devtools/shared-utils'
 import { onSharedDataChange } from '@front/util/shared-data'
 import { formatTime } from '@front/util/format'

packages/app-frontend/src/features/timeline/TimelineEventInspector.vue

@@ -2,7 +2,7 @@
 import StateInspector from '@front/features/inspector/StateInspector.vue'
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 
-import { computed, defineComponent } from '@vue/composition-api'
+import { computed, defineComponent } from 'vue'
 import { useDarkMode } from '@front/util/theme'
 import { toStrHex, dimColor, boostColor } from '@front/util/color'
 import { useInspectedEvent, useSelectedEvent } from './composable'

packages/app-frontend/src/features/timeline/TimelineEventList.vue

@@ -2,7 +2,7 @@
 import EmptyPane from '@front/features/layout/EmptyPane.vue'
 import TimelineEventListItem from './TimelineEventListItem.vue'
 
-import { computed, ref, watch, defineComponent } from '@vue/composition-api'
+import { computed, ref, watch, defineComponent } from 'vue'
 import { getStorage, setStorage } from '@vue-devtools/shared-utils'
 import { useRoute, useRouter } from '@front/util/router'
 import { onKeyDown } from '@front/util/keyboard'