HelloWorld.vue

import axios from "axios";
export const deploymentattribute = (Ser, id) =>
    axios.get(
        `http://api call here......
    );

<template>
  <div>
    <div v-for="(attribute, index) in attributes" :key="index">
      {{ attribute.att }}
    </div>
  </div>
</template> 

<script>
import { deploymentattribute } from "../../assets/deploymentattribute";
export default {
  name: "DeploymentAttributeView",
  data() {
    return {
      attributes: [],
    };
  },
  mounted() {
    this.loadData();
  },
  computed: {
    deploymentattribute() {
      return this.$route.query.Ser, this.$route.query.id;
    },
  },
  methods: {
    loadData() {
      if (!this.deploymentattribute) return; // no ID, leave early
      deploymentattribute(
        this.$route.params.Ser,
        this.$route.params.id
      ).then((attribute) => {
        this.attributes = attribute.data;
      });
    },
  },
 </script>

While calling the api, i am getting ser as undefined. Not sure why.

Attaching the image below.

Where if u see above image, for id, i am getting dynamic one, and for ser. it is always showing as undefined

Is there any way to solve that issue.

Or did i choose the ser correctly like passing query params correctly?

I am thinking that, issue is with the computed property where, i am returning multiple conditions with , i think i schould right the condition there?