Estoy trabajando en un proyecto con Vue3 para enumerar todas las universidades de Suecia y tengo problemas con RouterLink para llevar al usuario a una página externa y a la página web oficial de las universidades. ¿Alguien tiene algunos consejos para solucionar este problema?

Este es mi archivo App.vue:

 <script> import TheHeader from "./components/styling/TheHeader.vue"; import UniversityList from "./pages/universities/UniversityList.vue"; export default { components: { TheHeader, UniversityList } } </script> <template> <TheHeader /> <university-list v-for="res in universities" :name="res.name" :country="res.country" :web_pages="res.web_pages" ></university-list> <RouterView/> </template> <style> @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;700&display=swap'); html { font-family: 'Epilogue', sans-serif; } * { box-sizing: border-box; } body { margin: 0; } </style>

Y esto es UniversityList.vue

 <template><ul> <li v-for="university in universities"> <div class="info"> <h3>{{ university.name }}, {{ university.country }}</h3> <RouterLink v-bind:to="university.web_pages">Källa</RouterLink> </div> </li> </ul> <RouterView/> </template> <script> export default { created() { fetch('http://universities.hipolabs.com/search?country=Sweden') .then((response) => response.json()) .then((result) => { this.universities = result }) }, data() { return { universities: null} }, props: ['name', 'country', 'web_pages'] } </script> <style> body { background-color: #dda15e; } .info { max-width: 800px; margin: 15px auto; background: white; border: 1px solid #424242; border-radius: 12px; padding-left: 20px; } h3 h4 { margin: 1rem 0; padding: 1rem; } </style>

¡Gracias por adelantado!