i try to remove this selected and make it empty array
this selected = []
and make the checked value to be false on v-data table
but still having redundant bug that push previous checked product

the flow is like this
checked From v-data-table send filtered data from it to the parent.vue
and start the @saved function put it to addedProduct

i filter it so v-data-table on parent.vue dont have the added product

i watch the Store variable and make the listedProduct change based on the Store code
so whenever the store change it should delete all data from addedProduct and selectedProduct from the component

<template>
  <v-dialog v-model="model" width="auto">
    <v-card style="width: 738px; padding: 5px;">
      <v-card-title
        class="text-h5"
        style="font-weight: 600; font-size: 21.5rem;"
      >
        Tambah Product
      </v-card-title>
      <div>
        <ISInput
          class="pa-4"
          label="Search"
          type="search"
          ref="search"
          v-model="search"
        >
        </ISInput>
        <div class="pa-4 pb-0" style="max-height: 150px;overflow-y: scroll;">
          <v-data-table
            ref="dataTable"
            :headers="headers"
            :items="filteredProduct"


            class="elevation-0 shadow-3"
            hide-default-footer
            hide-default-header
            item-key="id"
            show-select
            selectable-key="Code"
            :items-per-page="-1"
            :single-select="false"
             @input="handleSelect"
          >
         
          </v-data-table>
        </div>
      </div>

      <v-card-actions class="py-4">
        <v-card
          class="shadow-3"
          style="padding: 16px;display: flex;justify-content: end;width: 100%; border-radius: 10px;"
        >
          <OutlineButton color="error" label="Batal" :click="handleCancle" />
          <OutlineButton color="#0D726D" label="Simpan" :click="handleSave" />
        </v-card>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import OutlineButton from '@/components/buttons/OutlineButton.vue'
import ISInput from '@/components/input/ISInput.vue'
export default {
  components: { OutlineButton, ISInput },
  data: () => ({
    headers: [
      {
        text: 'name',
        align: 'start',
        sortable: false,
        value: 'Name',
      },
    ],
    search: '',
    selected: [],
  }),
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    productList: {
      type: Array,
      default: () => [],
    },
    addedProduct: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    productList: {
      async handler(newVal) {
        if (newVal !== "" && newVal !== null) {
          this.$nextTick(() => {
            if (this.$refs.dataTable) {
              this.$refs.dataTable.toggleSelectAll(false);
              this.selected = []
              // console.log(this.selected,'watch')
            }
          });
        }
      },
      immediate: true,
    },
  },
  computed: {
    model: {
      get: function() {
        return this.value
      },
      set: function(newValue) {
        this.$emit('input', newValue)
      },
    },
    filteredProduct() {
      if (this.search !== '') {
        return this.notAddedProduct.filter((item) =>
          item.Name?.toLowerCase()?.includes(this.search.toLowerCase())
        )
      } else return this.notAddedProduct
    },
    notAddedProduct() {
      const product = this.addedProduct.map((item) => item.productCode)
      return this.productList.filter((item) => !product.includes(item.Code))
    },
  },
  methods: {
    handleCancle() {
  //  this.productList.forEach(item => {
  //       item.checked = false;
  //     });
  //     this.$nextTick(() => {
  //       this.$refs.dataTable.toggleSelectAll(false);
  //     });
      this.model = false
    },
    
    handleSave() {
      this.model = false
      this.$emit('save', this.selected)
    },
    handleSelect(item) {
      this.selected = item.map((item) => ({
        ...item,
        name:item.Name,
        notes:'',
        price:null,
        weight : item.Weight,
        id: item.id,
        batchNo: item.Group || 'tes',
        subtotals : null,
        productCode: item.Code,
        code:item.Code,
        quantity:0,
      }))
      console.log(this.selected,'this.selected')
    },
  },
}
</script>

//parent.vue

 <ModalAddProduct
          v-model="modal.addProduct"
          :product-list="list.product"
          :added-product="param.listProduct"
          @save="handleAddProduct"
        />

async handleAddProduct(item) {
     
      console.log(item,'from save')
      // Create a Set of product codes from the main product list for fast lookup
      const productCodesSet = new Set(this.list.product.map(p => p.Code));

      for (const modalitem of item) {
        if (productCodesSet.has(modalitem.productCode)) {
          // Check if the product is already in the added product list
          const isProductInList = this.param.listProduct.some(
            (listitem) => listitem.productCode === modalitem.productCode
          );
          if (!isProductInList) {
            try {
              this.param.listProduct.push(modalitem);
            } catch (error) {
              console.error(error);
            }
          }
        } else {
        }
      }
    },