I'm writing a Vue application using Vuetify. In this application, I use v-for to iterate over an array of objects to build a list of cards. Inside each card is a checkbox that maps to a calculated getter/setter that updates the value in my Vuex store.

When the checkbox is selected, I log out the value and display the folder object. However, when unchecked, the value is an empty array. Is there any way to push a folder object into a setter when the checkbox is unchecked? I've tried using false-value but there seems to be no way to bind it to the folder object.

The following is the logic of the card:

<v-col v-for="folder in childFolders" :key="folder.id">
   <v-card class="mb-2 object-card">
      <v-list-item two-line class="two-line">
         <v-list-item-action>
            <v-checkbox v-model="selectedFolders" :ripple="false" :value="folder" />
         </v-list-item-action>
      </v-list-item>
   </v-card>
</v-col>

The following is a bidirectional computed property that handles the selected folder in the settings store:

selectedFolders: {
   get: function(){
     return this.$store.getters.selectedFolders
   },

   set: function(folder){
     console.log(folder) // returns [{}] when checking and returns [] when unchecking
     return this.$store.commit('selectMainItem', folder)
   }
}