Dynamic router link changes *slash* to %2F

I've got little problem with dynamic router link. I got array of objects(pages) from API, and one of them is my home:

{
    name:"dynamic"
    parent_id:0
    partners:null
    slug:"/"
}

then using v-for I want create router-link like this:

<div v-for="page in pages">
    <router-link
      :to="{ name: page.name, params: { slug: page.slug }}"
      class="v-list__link"
    >
</div>

Problem is when I render page this link to home is not <a href="/"> as I expected but it is with endocing reference: %2F => <a href="%2F">

router.js

export default new Router({
  scrollBehavior (to, from) {
    return { x: 0, y: 0 }
  },
  mode: 'history',
  routes: [
    {
      path: '/:slug',
      name: 'dynamic',
      component: Dynamic
    },
    {
      path: '/',
      name: 'dynamic',
      component: Dynamic
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

does anyone know how to solve it ?