VueJS Zoom in/out performance lags - vue.js

Question

I am creating a web app which has a lot of tables that get rendered on the page, however I have noticed the performance of the web page reduces drastically the more I add. Especially when i zoom in and out, this causing the page to lag for a few seconds. Is there any way to work around this? I have heard lazy loading is a good method, however that seems like its only for initial loads.
<v-text-subtitle name="moaamlol6" class="blue--text"
>Mapping of Assessment Against Module Learning Outcomes - Level
6</v-text-subtitle
>
<v-dialog
v-model="dialogL6"
fullscreen
hide-overlay
transition="dialog-bottom-transition"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
v-bind="attrs"
v-on="on"
outlined
>
Edit
</v-btn>
</template>
<v-card>
<v-toolbar dark color="primary">
<v-toolbar-title
>Mapping of Assessment Against Module Learning Outcomes -
Level 6</v-toolbar-title
>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn text dark #click="dialogL6 = false"> Cancel </v-btn>
<v-divider vertical></v-divider>
<v-btn dark text #click="generateL6"> Insert </v-btn>
</v-toolbar-items>
</v-toolbar>
<v-card-text style="display: inline-flex">
<div>
<table class="bordered" ref="L6">
<tr>
<th colspan="99">
Mapping of Assessment Against Module Learning Outcomes -
Level 6
</th>
</tr>
<tr>
<th rowspan="2">Module Assessment Elements</th>
<th colspan="99">Module Learning Outcomes</th>
</tr>
<tr>
<td v-for="index in numOfCLO" v-bind:key="index">
{{ index }}
</td>
</tr>
<tr v-for="y in specMod.length" v-bind:key="y">
<td>{{ specMod[y - 1].module_name }}</td>
<td
class="notclicked"
v-for="x in numOfCLO"
v-bind:key="x"
:id="x + '*' + y"
#click="changeClassL6(x, y)"
></td>
</tr>
</table>
</div>
<div>
<p v-html="courseDataJson[0].mapping_assessment_l6"></p>
</div>
</v-card-text>
</v-card>
</v-dialog>
<p
v-html="courseDataJson[0].mapping_assessment_l6"
v-if="dialogL6 == false"
></p>
I have 4x of these tables, however the performance is fine. But once I add the final table the performance tanks
<v-text-subtitle name="isfa" class="blue--text"
>Indicative Schedule for Assessment</v-text-subtitle
>
<table class="bordered" ref="indicative">
<tr>
<th colspan="99">Indicative Schedule for Assessment</th>
</tr>
<tr>
<th>Week</th>
<td>Level 3</td>
<td>Level 4</td>
<td>Level 5</td>
<td>Level 6</td>
<td>Level 7</td>
</tr>
<tr>
<th>TT</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr v-for="x in 52" :key="x">
<th>Week {{ x }}</th>
<td
v-for="y in 5"
:key="y"
#click="openDialog(x, y)"
class="clickable"
>
<div v-for="data in schedule_dataJson" v-bind:key="data.id">
<v-card
v-if="data.week == x && data.level == y + 2 && data.courseId == courseDataJson[0].id"
class="mt-2 mb-2"
color="#F5F5F5"
>
<v-toolbar :color="data.colour">
<v-toolbar-title>
<v-icon>{{ data.icon }}</v-icon> {{ data.name }} |
{{ data.location }}
</v-toolbar-title>
</v-toolbar>
<v-card-text v-if="data.note != null">
{{ data.note }}
</v-card-text>
</v-card>
</div>
</td>
</tr>
</table>
<v-dialog
v-model="dialog"
width="500"
height="1000"
persistent
transition="scale-transition"
>
<v-card>
<v-toolbar color="blue">
<v-toolbar-title>
Enter Schedule - Week {{ week }} - Level {{ level + 2 }}
</v-toolbar-title>
</v-toolbar>
<v-card-text
><v-select label="Icon" :items="items" v-model="icon">
<template slot="item" slot-scope="data">
<v-icon>{{ data.item }}</v-icon>
</template>
<template slot="selection" slot-scope="data">
<v-icon>{{ data.item }}</v-icon>
</template>
</v-select></v-card-text
>
<v-card-text
><v-text-field label="Select Name" v-model="name"></v-text-field
></v-card-text>
<v-card-text
>Select Colour:
{{ colour }}
<v-color-picker
class="ma-2"
dot-size="30"
v-model="colour"
:swatches="swatches"
show-swatches
hide-canvas
disabled
hide-inputs
></v-color-picker
></v-card-text>
<v-card-text
><v-text-field
label="Select Location"
v-model="location"
></v-text-field
></v-card-text>
<v-card-text>
<v-textarea auto-grow outlined label="Notes" v-model="note">
</v-textarea>
</v-card-text>
<v-divider></v-divider>
<v-card-subtitle
><v-btn text color="primary" #click="dialog2 = true"
>Existing Events</v-btn
></v-card-subtitle
>
<v-dialog
v-model="dialog2"
transition="slide-y-transition"
width="500"
height="1000"
persistent
>
<v-card>
<v-card-title class="pink lighten-2">
Delete Existing Events
</v-card-title>
<div v-for="data in schedule_dataJson" v-bind:key="data.test">
<v-toolbar
:color="data.colour"
v-if="data.week == week && data.level == level + 2"
>
<v-toolbar-title>
{{ data.name }} |
<v-icon>{{ data.icon }} | {{ data.id }} </v-icon>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn icon #click="deleted(data.id)"
><v-icon>mdi-delete</v-icon></v-btn
>
</v-toolbar-items>
</v-toolbar>
</div>
<v-divider></v-divider>
<v-card-actions>
<v-btn #click="dialog2 = false">close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions>
<v-btn #click="dialog = false" color="primary" text
>Cancel</v-btn
>
<v-btn #click="insert" color="primary" text>Insert</v-btn>
</v-card-actions>
</v-card>
</v-dialog>