form üzerinde değişiklik yapıp cancel ile formdan cıkınca tüm degerler varsayılana guncellenıyor. sadece select menu son secimde kalıyor.
6 saat boyunca denemedigim sey kalmadı... cözüm bulamadım.

<template>
  <div v-if="isVisible" class="fixed inset-0 flex items-center overflow-auto justify-center bg-gray-900 bg-opacity-50 z-50" role="dialog" aria-labelledby="modal-title" aria-modal="true">
    <div class="bg-white p-6 w-full h-screen flex flex-col">
      <form @submit.prevent="save">
        <div class="flex flex-row gap-6 mx-6">
          <div class="basis-4/6">
            <ClientOnly>
              <Quill
                :content="item.content"
                @update:content="updateContent"
              />
            </ClientOnly>
             <div v-if="item.featured_image_url" class="flex justify-end mt-4">
              <img :src="item.featured_image_url" alt="Current Image" class="w-[300px] h-[150px] object-cover rounded"/>
            </div>
          </div>
          <div class="basis-2/6">
            <h2 id="modal-title" class="text-2xl font-semibold mb-4">Gönderiyi Düzenle</h2>
            <div class="mb-4">
              <label for="category" class="block text-sm font-medium text-gray-700">Kategori</label>
              <select id="category" v-model="item.category.id" class="block w-full bg-gray-100 text-gray-900 py-2 px-3 focus:outline-none">
              <option v-for="category in categories" :key="category.id" :value="category.id">
                  {{ category.ad }}
                </option>
              </select>
              
              <span v-if="errors && errors.category" class="flex items-center text-gray-900 py-1 px-1 text-[12px] font-semibold">
                <Icon class="mr-1 text-red-600" name="subway:cercle-7" size="16"/>
                {{ errors.category[0] }}
              </span>
            </div>
            <div class="mb-4">
              <label for="ad" class="block text-sm font-medium text-gray-700">Başlık</label>
              <input
                id="ad"
                v-model="item.title"
                @input="generateSlug"
                type="text"
                required
                maxlength="70"
                class="block w-full bg-gray-100 text-gray-900 py-2 px-3 focus:outline-none"
              />
              <p class="text-sm text-gray-500 mt-1">Karakter Sayısı: {{ titleCharacterCount }} / 70</p>
            </div>
            <div class="mb-4">
              <label for="slug" class="block text-sm font-medium text-gray-700">Slug</label>
              <input
                id="slug"
                v-model="item.slug"
                type="text"
                required
                readonly
                class="block w-full bg-gray-100 text-gray-900 py-2 px-3 focus:outline-none cursor-not-allowed"
              />
            </div>
            <div class="mb-4">
              <label for="aciklama" class="block text-sm font-medium text-gray-700">Açıklama</label>
              <textarea
                id="aciklama"
                v-model="item.description"
                cols="30"
                rows="4"
                maxlength="255"
                class="resize-none w-full bg-gray-100 text-gray-900 py-2.5 px-3 focus:outline-none"
              ></textarea>
              <p class="text-sm text-gray-500 mt-1">Karakter Sayısı: {{ descriptionCharacterCount }} / 255</p>
            </div>
            <div class="mb-6">
              <label for="file_input" class="block text-sm font-medium text-gray-700">Görsel</label>
              <input
                type="file"
                id="file_input"
                accept="image/*"
                @change="handleFileChange"
                class="block w-full text-sm cursor-pointer bg-gray-100 text-gray-900 file:bg-gray-900 file:text-white file:rounded file:my-2 file:py-0.5"
              />
            </div>
            
            <div class="flex justify-end space-x-2">
              <button
                type="button"
                @click="cancel"
                class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
              >
                İptal
              </button>
              <button
                type="submit"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
              >
                Kaydet
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

const props = defineProps({
  isVisible: Boolean,
  item: Object,
  categories: Array,
  errors: Object
});

const emit = defineEmits(['save', 'cancel']);

const initialItem = ref({ 
  ...props.item
});
const item = ref({ ...props.item });

const titleCharacterCount = computed(() => item.value.title.length);
const descriptionCharacterCount = computed(() => item.value.description.length);

const updateContent = (content) => {
  item.value.content = content;
};

const generateSlug = () => {
  const trMap = {
    'ç': 'c', 'Ç': 'c',
    'ğ': 'g', 'Ğ': 'g',
    'ş': 's', 'Ş': 's',
    'ü': 'u', 'Ü': 'u',
    'ı': 'i', 'İ': 'i',
    'ö': 'o', 'Ö': 'o'
  };

  let slug = item.value.title || '';
  for (const [key, value] of Object.entries(trMap)) {
    slug = slug.replace(new RegExp(key, 'g'), value);
  }

  item.value.slug = slug
    .toLowerCase()
    .replace(/[^a-z0-9 -]/g, '')
    .replace(/\s+/g, '-')
    .replace(/-+/g, '-');
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    item.value.featured_image = file;
    item.value.featured_image_url = URL.createObjectURL(file);
  }
};

watch(() => props.item, (newVal) => {
  initialItem.value = { ...newVal };
  item.value = { ...newVal };
}, { deep: true });

watch(() => item.value.title, () => {
  generateSlug();
}, { immediate: true });

const save = () => {
  emit('save', item.value);
};

const cancel = () => {
  item.value = { ...initialItem.value };
  emit('cancel');
};

</script>