I'm working on a project with Vue3 to list all universities in Sweden and are having problems with RouterLink to take the user to an external page and the universities official webpage. Does any one have some tips to fix this problem?

This is my App.vue file:

<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>

And this is 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>

Thanks in advance!