Developers frequently encounter scenarios where an asynchronous delete operation completes successfully at the server level, yet the associated frontend data table fails to reflect these changes. This discrepancy usually points to missed refresh callbacks or improper handling of reactivity within the component setup phase. In complex setups involving Element Plus and Axios, relying on intermediate reactive flags without explicit list refetching often leads to stale view rendering.

To ensure the user interface accurately mirrors the database state immediately after a removal action, its crucial to manage the request lifecycle strictly. The following implementation demonstrates a robust pattern for managing deletion requests and ensuring the view updates correctly without relying on external side effects.

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { MonitorItem } from '@/types/monitor';

// Define reactive state management
const isLoading = ref(false);
const recordList = ref<MonitorItem[]>([]);

// Standardized fetch function with error handling
const fetchRecordList = async (): Promise<void> => {
  isLoading.value = true;
  try {
    const response = await axios.get('/api/monitors');
    recordList.value = response.data.items || [];
  } catch (error) {
    console.error('Fetch failed:', error);
    ElMessage.error('Failed to load records');
  } finally {
    isLoading.value = false;
  }
};

// Dedicated handler for deletion logic
const handleDeleteRecord = async (id: number): Promise<void> => {
  try {
    await ElMessageBox.confirm(
      'Confirm permanent deletion of this item?',
      'System Warning',
      { confirmButtonText: 'Proceed', cancelButtonText: 'Abort', type: 'warning' }
    );

    isLoading.value = true;
    await axios.delete(`/api/monitors/${id}/remove`);

    // Trigger immediate list refresh upon success
    await fetchRecordList();
    ElMessage.success('Deletion completed successfully');
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Operation cancelled or failed:', error);
    }
  } finally {
    isLoading.value = false;
  }
};

// Lifecycle hook initialization
onMounted(() => {
  fetchRecordList();
});
</script>

In this revised structure, the handleDeleteRecord function encapsulates both the user confirmation and the network request. By awaiting the fetch operation directly after the deletion API call, we guarantee the local state reflects the latest backend status before rendering the new list. Removing intermediate reactive flags like update.value simplifies the flow and reduces potential race conditions that might prevent the DOM from refreshing immediately. Ensuring isLoading remains active during both the delete and subsequent fetch operations provides continuous visual feedback to the user.