I am trying to build one feature where i can schedule the light switch feature along with enable disable functionality to the kubernetes environment. Below is the code that I use as a skeleton. That I am going to use. It’s kind of light switch that i am going to use it for. Is there a way to make even better following best practices? As I am new to vue.js (2.x version), I just want to make sure, my approach is right.

        <!-- MyComponent.vue -->
        <template>
          <div>
            <h1>Scheduler Features</h1>
        
            <!-- Render clusters and namespaces from your existing application -->
            <div v-for="cluster in clusters" :key="cluster.id">
              <h2>{{ cluster.name }}</h2>
              <div v-for="namespace in cluster.namespaces" :key="namespace.id">
                <h3>{{ namespace.name }}</h3>
        
                <!-- Feature 1: Schedules -->
                <button @click="getSchedules(cluster.name, namespace.name)">
                  Get Schedules
                </button>
        
                <!-- Feature 2: Set Lightswitch -->
                <div>
                  <h4>Set Lightswitch</h4>
                  <form @submit.prevent="setLightswitch(cluster.name, namespace.name)">
                    <!-- Input fields for light, desired_replicas, cron, sid -->
                    <label for="light">Light:</label>
                    <input v-model="light" type="text" required />
        
                    <!-- Other input fields... -->
        
                    <button type="submit">Set Lightswitch</button>
                  </form>
                </div>
        
                <!-- Feature 3: Toggle Lightswitch -->
                <div>
                  <h4>Toggle Lightswitch</h4>
                  <form @submit.prevent="toggleLightswitch(cluster.name, namespace.name)">
                    <!-- Input fields for enable/disable, sid -->
                    <label for="enable">Enable:</label>
                    <input v-model="enable" type="checkbox" />
        
                    <!-- Other input fields... -->
        
                    <button type="submit">Toggle Lightswitch</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </template>
        
        <script>
        export default {
          data() {
            return {
              clusters: [
                // Sample cluster data structure
                {
                  id: 1,
                  name: "Cluster A",
                  namespaces: [
                    { id: 1, name: "Namespace 1" },
                    { id: 2, name: "Namespace 2" },
                  ],
                },
                // ... other clusters
              ],
              // Data properties for input fields
              light: "",
              enable: false,
              // ... other properties
            };
          },
          methods: {
            // Feature 1: Get Schedules
            getSchedules(cluster, namespace) {
              // Make API call using cluster, namespace, and other necessary parameters
              // Handle the response
            },
        
            // Feature 2: Set Lightswitch
            setLightswitch(cluster, namespace) {
              // Make API call using cluster, namespace, and other necessary parameters
              // Handle the response
            },
        
            // Feature 3: Toggle Lightswitch
            toggleLightswitch(cluster, namespace) {
              // Make API call using cluster, namespace, and other necessary parameters
              // Handle the response
            },
          },
        };
        </script>
        
        <style scoped>
        /* Add your component-specific styles here */
        </style>