I'm trying to use a button to switch between a scrollable table and the entire table in vue 3 js - vue.js

Question

I'm new to Vue and have been using Vue 3 along with Tailwind css on a intro project. I am trying to use two v-if's along with a click button to switch between the tables, but it is only showing the scrollable table, and when I click the button it doesn't show anything.
This is my data:
<template>
<div class="px-4 sm:px-6 lg:px-8">
<div class="sm:items-center">
<div class="sm:flex-none">
<h1 class="text-xl font-semibold text-gray-900 text-center">Test</h1>
<p class="mt-2 text-sm text-gray-700 text-center">Dummy Data</p>
<div class="flex justify-center mt-6">
<button #click="toggleList" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">Toggle List</button>
</div>
</div>
</div>
<br>
<div v-if="listIsVisible">
<div class='flex items-center justify-center'>
<div class='h-96 w-96 overflow-y-scroll flex justify-center'>
<table class='w-50 shadow-lg bg-white border-separate'>
<thead>
<tr class='bg-gray-100'>
<th class='w-20 px-4 py-2 bg-blue-600 text-white'>Column 1</th>
<th class='px-4 py-2 bg-blue-600 text-white'>Column 2</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="dummy in workflow" :key="dummy.contract">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-black sm:pl-6 text-center">{{ dummy.contract }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-black text-center">{{ dummy.spend }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-if="!listIsVisible">
<div class='flex items-center justify-center'>
<div class='overflow-y-scroll flex justify-center'>
<table class='w-50 shadow-lg bg-white border-separate'>
<thead>
<tr class='bg-gray-100'>
<th class='w-20 px-4 py-2 bg-blue-600 text-white'>Contract</th>
<th class='px-4 py-2 bg-blue-600 text-white'>Spend</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="dummy in raft" :key="dummy.contract">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-black sm:pl-6 text-center">{{ dummy.contract }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-black text-center">{{ dummy.spend }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const listIsVisible = ref(false);
function toggleList() {
listIsVisible.value = !listIsVisible.value;
}