How to force collapse all expansion panels?

I want to force close my expansion panel when I clicked Update

How do I programmatically do that ?

This is what I have in my update().

update(index) {
  console.log("index", index);

  let vehicle = {};
  vehicle.VIN = this.savedVehicles[index].VIN;
  vehicle.ModelYear = this.savedVehicles[index].ModelYear;
  vehicle.Make = this.savedVehicles[index].Make;
  vehicle.Model = this.savedVehicles[index].Model;

  this.savedVehicles[index] = vehicle;
  localStorage.setItem("savedVehicles", JSON.stringify(this.savedVehicles));

  this.alert = true;
  this.alertColor = "green";
  this.alertMessage = `${vehicle.VIN} updated`;

  // hope to collapse all expansion panels 👈🏽👈🏽👈🏽

},

Answer

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If multiple props are used then it is an array containing the indices of the open items.

1. To control the opening and closing status of multiple panels
   https://codepen.io/pen?&editors=101

2. If need to control only a single expansion panel then use this-

<template>
  <v-expansion-panels v-model="panel">
     // any code here
  </v-expansion-panels>
  <button @click="closePanel()">Close</button>
</template>
<script>
export default {
  data() {
    return {
      panel: 0 // This means should open by default
    }
  },
  methods: {
    closePanel() {
      this.panel = null; // null is to close the panel
    }
  }
}
</script>