modal not working

src/components/Worksheets-literacy.vue

@@ -5,13 +5,13 @@
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
                 <div class="flex">
-                    <h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
-                    <select class="select max-w-xs bg3">
-                        <option>Select your Age</option>
-                        <option>2-3 Year</option>
-                        <option>3-4 Year</option>
-                        <option>4-5 Year</option>
-                        <option>5-6 Year</option> 
+                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                    <select class="select max-w-xs bg3" @change="switchSelect($event)">
+                        <option value="2">Select Age</option>
+                        <option value="2">2-3 Year</option>
+                        <option value="3">3-4 Year</option>
+                        <option value="4">4-5 Year</option>
+                        <option value="5">5-6 Year</option> 
                     </select>
                 </div> 
                 <!-- <div class="flex ">
@@ -27,7 +27,7 @@
             </div>
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24">
-            <span class="h1-text text-color-1">All Worksheet</span>
+            <span class="h1-text text-color-1 font-semibold">All Worksheet</span>
             <p class=" text-lg text-color-2 text-base md:text-2xl text-justify">Practice every component of English literacy including letters, vowels, consonants and much more with the Literacy worksheet for preschoolers that keep a child’s ability to grasp mastery over literacy as the center of attention. Each worksheet contains suitable practice to promote learning and understanding. </p>
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
                 <div v-for="worksheet in wsLiteracy" :key="wsLiteracy.id" class="grid">
@@ -36,7 +36,7 @@
                             <img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
                         </div>
                         <h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
-                        <a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
+                        <!-- <a :href="'https://curriculum-app-api.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a> -->
                     </div>
                 </div>
                 
@@ -44,11 +44,11 @@
         </section>
         <section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
             <a href="/premium">
-                <div class="flex prime-bg p-10 relative">
+                <div class="flex prime-bg p-16 relative">
                     <h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
                     <div class="flex justify-center absolute inset-0 place-items-center">
                         <button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
-                    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20 w-full">
                         <div v-for="worksheet in wsfLiteracy" :key="wsfLiteracy.id" class="grid">
                             <div  class="grid place-items-center">
                                 <div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
@@ -107,7 +107,7 @@
 </style>
 <script>
 export default {
-    setup(){
+    setup(){ 
         // const route = useRoute();
 
     },
@@ -124,19 +124,30 @@ export default {
 
         } 
     },
-    mounted: function () {
-        fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy')
+    methods: {
+        switchSelect(event) {
+            // alert(event.target.value)
+            this.getWorksheets(event.target.value)
+        // this.selected = event.target.value;
+        },
+        getWorksheets(age=2){
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=literacy')
             .then(resp => resp.json())
             .then(worksheets => {
                 this.wsLiteracy=worksheets.data.reverse().slice(0, 4)
                 // console.log(this.wsLiteracy)
             })
-            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[Category][_eq]=literacy')
+            fetch('https://curriculum-app-api.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=literacy')
             .then(resp => resp.json())
             .then(worksheets => {
-                this.wsfLiteracy=worksheets.data.reverse().slice(5, 12)
+                this.wsfLiteracy=worksheets.data.reverse().slice(4, 16)
                 // console.log(this.wsfLiteracy)
-            })
+            }) 
+        }
+    },
+    mounted: function () {
+        this.getWorksheets()
+        
        
         }
     }