Vue Pass parameters to dynamic page through a dynamic route

Question

so I have a json file which contains a bunch of visual test results and I would like to have a column in the data table for each row which have a dynamic path for a vue page that showcases the details for each test.I've got most of it figured out except the dynamic routing and passing parameters to the dynamic page.Here's the datatable component that I created (I'm using vuetify and nuxt btw)

<template>
    <div>
        <v-text-field
          v-model="search"
          label="Search"
          class="mx-4"
        ></v-text-field>
        
          <v-data-table
    :headers="headers"
    :items="tests"
    :items-per-page="15"
    :search="search"
    class="elevation-1"
  >
     <template v-slot:[`item.status`]="{ item }">
      <v-chip
        :color="getColor(item.status)"
        dark
      >
        {{ item.status }}
      </v-chip>
    </template>
    <template #[`item.details`]="{ item }">
    <nuxt-link :to="`tests/${item.name}`">show details</nuxt-link>

  </template>
  </v-data-table>


    </div>
</template>

<script>
import testtable from '../../VisualTests/test_07_03_2022_10_13_48/Tests_results.json';
    export default {
  data() {
    return {
      search: '',  
      tests: testtable,
      headers: [
          {
            text: 'Test tag',
            align: 'start',
            sortable: true,
            value: 'tag',
          },
          { text: 'testname', value: 'name' },
          { text: 'status', value: 'status' },
          { text: 'details', value: 'details' },

        ]
       }
    
    },
     methods: {
      getColor (status) {
        if (status=="failed") return 'red'
        else if (status=="skipped/pending") return 'blue'
        else return 'green'
      }

  }
    }
</script>

<style lang="scss" scoped>

</style>

this is my nuxt router file :

import Vue from 'vue'
import Router from 'vue-router'
import { normalizeURL, decode } from 'ufo'
import { interopDefault } from './utils'
import scrollBehavior from './router.scrollBehavior.js'

const _05a6b87a = () => interopDefault(import('..\\pages\\tests\\_name\\index.vue' /* webpackChunkName: "pages/tests/_name/index" */))
const _f1328bfa = () => interopDefault(import('..\\pages\\index.vue' /* webpackChunkName: "pages/index" */))

const emptyFn = () => {}

Vue.use(Router)

export const routerOptions = {
  mode: 'history',
  base: '/',
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/tests/:name",
    component: _05a6b87a,
    name: "tests-name"
  }, {
    path: "/",
    component: _f1328bfa,
    name: "index"
  }],

  fallback: false
}

export function createRouter (ssrContext, config) {
  const base = (config._app && config._app.basePath) || routerOptions.base
  const router = new Router({ ...routerOptions, base  })

  // TODO: remove in Nuxt 3
  const originalPush = router.push
  router.push = function push (location, onComplete = emptyFn, onAbort) {
    return originalPush.call(this, location, onComplete, onAbort)
  }

  const resolve = router.resolve.bind(router)
  router.resolve = (to, current, append) => {
    if (typeof to === 'string') {
      to = normalizeURL(to)
    }
    return resolve(to, current, append)
  }

  return router
}

I want to pass the testname,tag and status to the dynamic page.

So far, I have only been able to pass 1 parameter(name).

my dynamic page is in a folder named tests inside pages with a nested '_name' folder that contains index.vue. How can I pass all the parameters ?