JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">
  
  <nav>
    <router-link  v-for="breed in breeds" :to="'/dogs/' + breed">
      {{ breed }}
    </router-link>
  </nav>
    
  <section class="content">
    <router-view></router-view>
  </section>
  
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  padding: 10px;
}

#app nav {
  flex: 0 0 30%;
  background: #000;
  border: 1px solid #000;
}

#app nav a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 10px;
  transition: all 0.2s;
}

#app nav a.router-link-active,
#app nav a:hover {
  background: #fff;
  color: #000;
}

.content {
  flex: 1;
  padding: 10px;
  margin-left: 10px;
  border: 1px solid #000;
}

img {
  display: block;
  width: 100%;
  margin: 0 0 10px;
}

ul {
  list-style: none;
}

Babel + JSX

const CompHome = {
	template: `<div> choisi une race de chien </div>`
}

const CompDogs = {
	template: `<ul>
  	<li v-for="dog in dogs"> <img :src="dog" /> </li>
  </ul>`,

  data() {
  	return {
    	dogs: []
    }
  },
  
  watch: {
  	// ici, on watch la donnée réactive $route fourni par vue-router
  	'$route.params': {
    	immediate: true,
      handler: function(newParams, oldParams) {
        console.log('new', newParams)
        console.log('new', oldParams)

        // comme ici on sait que la route à changé
        // on peut refraichir la list
        this.getDogs(newParams.breed)
      }
    }
  },
  
  methods: {
  	getDogs(breed) {
    	// on récupère les chiens d'une race en particulier
      fetch(`https://dog.ceo/api/breed/${breed}/images`)
        .then(resp => resp.json())
        .then(json => (this.dogs = json.message))
    }
  }
}

const router = new VueRouter({
  routes: [
    { path: '/', component: CompHome },
    { path: '/dogs/:breed', component: CompDogs }
  ]
})


new Vue({
	el: '#app',
  router,
  
  data: {
  	breeds: []
  },
  
  created() {
  	// on va chercher toutes les races de chiens
  	fetch('https://dog.ceo/api/breeds/list/all')
      .then(resp => resp.json())
      .then(json => (this.breeds = Object.keys(json.message)))
  }
})