How to toggle a v-if

Question

I am trying to toggle between two components in my Vue.js Navbar. But as I am calling the toggle function, the value of active is changing, however, the components displayed do not.

This is my App.vue

<template>
  <div>
    <Navbar :content="content" v-on:setActiveComponent="toggle"></Navbar>
    
    <Home v-if="active"></Home>
    <FormList v-if="!active"></FormList>
    <Footer></Footer>
    
  
  </div>
</template>

<script setup>

let active = ref(true);

function toggle() {
  console.log(active)
  active = !active;
}

const content = ["Home", "Neues Formular erstellen", "Formular laden"];
</script>

and this is my Navbar.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-red">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" @click="active = !active" >{{ props.content[0] }}</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" @click="$emit('setActiveComponent')">{{ props.content[1] }}</a>
        </li>
      </ul>
    </div>
  </nav>
</template>