select default lens instead of raw

components/lenses/ResponseBodyRenderer.vue

@@ -2,11 +2,11 @@
   <div>
     <tabs>
       <tab
-        v-for="lens in validLenses"
+        v-for="(lens, index) in validLenses"
-        :id="lens.lensName"
         :key="lens.lensName"
+        :id="lens.lensName"
         :label="lens.lensName"
-        :selected="lens.lensName === 'Raw'"
+        :selected="index == 0"
       >
         <component :is="lens.renderer" :response="response" />
       </tab>

helpers/lenses/lenses.js

@@ -3,14 +3,7 @@ import rawLens from "./rawLens"
 import imageLens from "./imageLens"
 import htmlLens from "./htmlLens"
 
-const lenses = [
+const lenses = [jsonLens, imageLens, htmlLens, rawLens]
-  jsonLens,
-  imageLens,
-  htmlLens,
-
-  // Keep Raw Lens as the last option
-  rawLens,
-]
 
 function getSuitableLenses(response) {
   const result = []

pages/index.vue

@@ -1425,13 +1425,13 @@ export default {
     collections: () => import("~/components/collections"),
     saveRequestAs: () => import("~/components/collections/saveRequestAs"),
     Editor: AceEditor,
-    environments: () => import("../components/environments"),
+    environments: () => import("~/components/environments"),
-    inputform: () => import("../components/firebase/inputform"),
+    inputform: () => import("~/components/firebase/inputform"),
-    notes: () => import("../components/firebase/feeds"),
+    notes: () => import("~/components/firebase/feeds"),
-    login: () => import("../components/firebase/login"),
+    login: () => import("~/components/firebase/login"),
-    tabs: () => import("../components/ui/tabs"),
+    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("../components/ui/tab"),
+    tab: () => import("~/components/ui/tab"),
-    "response-renderer": () => import("../components/lenses/ResponseBodyRenderer"),
+    "response-renderer": () => import("~/components/lenses/ResponseBodyRenderer"),
   },
   data() {
     return {