fix: broken component import in prod

components/smart/AceEditor.vue

@@ -57,11 +57,12 @@
 <script>
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
+import { defineComponent } from "@nuxtjs/composition-api"
 import jsonParse from "~/helpers/jsonParse"
 import debounce from "~/helpers/utils/debounce"
 import outline from "~/helpers/outline"
 
-export default {
+export default defineComponent({
   props: {
     provideOutline: {
       type: Boolean,
@@ -265,7 +266,7 @@ export default {
       }
     }),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/Anchor.vue

@@ -31,7 +31,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -70,5 +72,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>

components/smart/AutoComplete.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     spellcheck: {
       type: Boolean,
@@ -181,7 +183,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/ConfirmModal.vue

@@ -17,7 +17,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     title: { type: String, default: null },
@@ -43,5 +45,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/smart/Icon.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     name: {
       type: String,
@@ -15,5 +17,5 @@ export default {
       return require(`~/assets/icons/${this.name}.svg?inline`)
     },
   },
-}
+})
 </script>

components/smart/Intersection.vue

@@ -12,9 +12,9 @@
   ------
   intersecting (entry: IntersectionObserverEntry) -> When the component is intersecting the viewport
 */
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       observer: null as IntersectionObserver | null,

components/smart/Item.vue

@@ -76,7 +76,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -135,5 +137,5 @@ export default {
       default: "",
     },
   },
-}
+})
 </script>

components/smart/JsEditor.vue

@@ -10,6 +10,7 @@ import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
 import * as esprima from "esprima"
+import { defineComponent } from "@nuxtjs/composition-api"
 import debounce from "~/helpers/utils/debounce"
 import {
   getPreRequestScriptCompletions,
@@ -18,7 +19,7 @@ import {
   performTestLinting,
 } from "~/helpers/tern"
 
-export default {
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -275,7 +276,7 @@ export default {
         })
     }, 2000),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/ProgressRing.vue

@@ -22,7 +22,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     radius: {
       type: Number,
@@ -51,5 +53,5 @@ export default {
       return this.circumference - (this.progress / 100) * this.circumference
     },
   },
-}
+})
 </script>

components/smart/Tab.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     label: { type: String, default: null },
     info: { type: String, default: null },
@@ -26,5 +28,5 @@ export default {
   mounted() {
     this.active = this.selected
   },
-}
+})
 </script>

components/smart/Tabs.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     styles: {
       type: String,
@@ -59,7 +61,7 @@ export default {
       this.$emit("tab-changed", id)
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/Toggle.vue

@@ -13,14 +13,16 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     on: {
       type: Boolean,
       default: false,
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">