Checkboxes group

I'm trying to create a selector where the user selects items using a foreach of options that have a checkbox, but I need to save the entire modal and not just the id, so when editing the checkboxes don't work (I use the same component to create and edit this model). How this works is, on the left panel are the are the items that can be selected and on the right are the items the user has selected, the code below is only of the left panel.

Here is what it looks like https://ibb.co/bNnqDGv

This is what I have so far

 <div
   v-for="preview in search(
   sale_point_results,
   sale_points_results_search
   )"
   :key="preview.id"
   >
   <span  class="flex">
      <input
         type="checkbox"
         @click="save_sale_point(preview.id)"
         :checked="sale_point_selected_value(preview.id)"
         />

	  //tried this but it didn't work correctly, it displays which are selected correctly but when I click on a checkbox to add another one or to remove it, it crashed with an error 'Cannot read properties of undefined (reading 'description')"'
      <!-- :checked="sale_point_selected_value(preview.id)"
         v-model="survey.sale_points[preview_index]" -->

      <div>
         <p>
            {{ preview.name }}
         </p>
         <p>
            <span>Formato: </span>
                {{ preview.format.description }}
         </p>
      </div>
   </span>
</div>

//methods
    search(array, search_val) {
      if (search_val !== null && search_val.length > 0) {
        return array.filter((item) => {
          return item.name.toLowerCase().includes(search_val.toLowerCase());
        });
      }

      return array;
    },
    save_sale_point(item) {
      if (!this.survey.sale_points.includes(item)) {
        this.survey.sale_points.push(item);
      } else {
        this.survey.sale_points = this.survey.sale_points.filter(function (v, i) {
          return i !== this.survey.sale_points.indexOf(item);
        });
      }
    },
    sale_point_selected_value(item) {
      return this.survey.sale_points.filter(function (v, i) {
        return v.id === item;
      });
    },

However the code I have now doesn't work either, if you see the image you can see that all the items on the left panel are selected but there is only one actually selected in the right panel.

Since I need the additional data of the item I can't just save the id as I normally would only the id, how can I get this to work?