Fix unwanted runtime errors on services and android page

nuxt-frontend/pages/portfolio/index.vue

@@ -11,67 +11,60 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import config from "@/config.js";
 import Header from "@/components/partials/NewHeader.vue";
 import CaseStudy from "@/components/home-new/CaseStudy.vue";
 import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 
 const UserReview = defineAsyncComponent(() =>
-  import("@/components/home-new/UserReview.vue"),
+  import("@/components/home-new/UserReview.vue")
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/home-new/CTASection.vue"),
+  import("@/components/home-new/CTASection.vue")
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue"),
+  import("@/components/partials/NewFooter.vue")
 );
+const { $mixpanel } = useNuxtApp();
 
-export default {
-  data() {
-    return {
-      event: "",
-      events: {
-        footer: "view_portfolio_footer_section",
-        userReview: "view_portfolio_user_review_section",
-      },
-    };
-  },
-  setup() {
-    const seoData = config.PORTFOLIO_SEO_META_DATA;
-    useSeoMeta({
-      title: seoData.title,
-      description: seoData.description,
-      ogTitle: seoData.title,
-      ogType: seoData.type,
-      ogUrl: seoData.url,
-      ogImage: seoData.image,
-    });
-  },
-  components: {
-    Header,
-    CaseStudy,
-    UserReview,
-    CTASection,
-    NewFooter,
-  },
-  inject: ["mixpanel"],
-  mounted() {
-    window.addEventListener("scroll", this.sendEvent);
-    this.$mixpanel.track("view_portfolio_page");
-  },
-  unmounted() {
-    window.removeEventListener("scroll", this.sendEvent);
-  },
-  methods: {
-    sendEvent() {
-      const event = this.events[elementInViewPort(this.$refs)];
-      if (event && this.event !== event) {
-        this.event = event;
-        this.$mixpanel.track(event);
-      }
-    },
-  },
+const casestudy = ref(null);
+const userreview = ref(null);
+const ctasection = ref(null);
+
+const seoData = config.PORTFOLIO_SEO_META_DATA;
+useSeoMeta({
+  title: seoData.title,
+  description: seoData.description,
+  ogTitle: seoData.title,
+  ogType: seoData.type,
+  ogUrl: seoData.url,
+  ogImage: seoData.image,
+});
+
+let event = "";
+let events = {
+  userReview: "view_portfolio_user_review_section",
+  footer: "view_portfolio_footer_section",
 };
+onMounted(() => {
+  elements = ref({
+    casestudy: casestudy,
+    userreview: userreview,
+    ctasection: ctasection,
+  });
+  window.addEventListener("scroll", sendEvent);
+  $mixpanel.track("view_portfolio_page");
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", sendEvent);
+});
+function sendEvent() {
+  const newEvent = events[elementInViewPort(elements.value)];
+  if (newEvent && event !== newEvent) {
+    event = newEvent;
+    $mixpanel.track(event);
+  }
+}
 </script>