Passing props to router link - Vue.js

Question

I am trying to pass props for my router link name, but it doesn't work at all. What am I doing wrong?

Buttons component:

<template>
      <router-link :to="{ name: nextStep }" tag="button" class="button">Back</router-link>
      <router-link :to="{ name: previousStep }" tag="button" class="button">Next</router-link>
</template>
<script>
    export default {
        props: {
            nextStep: {
                type: String,
                default: null,
            },
            previousStep: {
                type: String,
                default: null
            }
        },
     
    }
</script>

When I use the component

  <Buttons :nextStep="Firststep" :previousStep="Secondstep" />

And my router js to make sure the name is correct

{
    path: "/firststep",
    name: "Firststep",
    component: FirstStep
  },
  {
    path: "/secondstep",
    name: "Secondstep",
    component: SecondStep
  },

Answer 1

Try to remove the binding sign : :

<Buttons nextStep="Firststep" previousStep="Secondstep" />

if you use the binding sign that values should be defined as properties.