How to call array values dynamically and pass it as query params in Vuejs?

HelloWorld.vue

export const datalist = [
  { id: 1, val: "11", kk: "potter" },
  { id: 2, val: "22", kk: "james" },
  { id: 3, val: "55", kk: "limda" },
  { id: 4, val: "77", kk: "stepen" }
];
 

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
        
      </router-link>
    </div>
    <br /><br /><br />
    <User />
  </div>
</template>

<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default { 
  name: "HelloWorld",
  components: {
    User,
  },
  data() {
    return {
      items: datalist,
    };
  },
};
</script>

User.vue

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import book from "./components/book.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: "/", name: "User", component: HelloWorld },
    { path: "/", name: "BookWithID", component: book },
    { path: "/:id", name: "UserWithID", component: HelloWorld }
  ]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

export const datalisttwo = [
  { id: 1, book: "steel", pen: "p1", gap: "1" },
  { id: 2, book: "iron", pen: "jp2", gap: "5" },
  { id: 3, book: "platinium", pen: "p3", gap: "2" },
  { id: 4, book: "gold", pen: "p4", gap: "9" }
];

<template>
  <div>
    <router-link :to="{ name: 'BookWithID' }">
      
    </router-link>
  </div>
</template>

<script>
import { datalisttwo } from "./datalisttwo";
export default {
  name: "User",
  components: {},
  data() {
    return {
      lists: datalisttwo,
    };
  },
  computed: {
    user: function () {
      return this.lists.find((item) => item.id === this.$route.params.id);
    },
  },
};
</script>

As per the below code, in the datalisttwo.js I have array values like steel and pen Where i want to call both of them together like steel/pen as an api call in the mounted() .

When i click on the router-link, from User.vue component.

Ex:- I want to pass the pen/gap array values as query parameters. when clicked on from user.vue componet. Please go through codesandbox once, I tried adding computed property for pen and gap. But pen/gap --- but not calling dynamically

Here is my code:- https://codesandbox.io/s/new-hill-6yum4o?file=/src/components/User.vue

from How to call array values dynamically and pass it as query params in Vuejs?